跳到内容

Icon Font

YCloud Icons 也提供 Web Font 版本。字体会把所有图标作为 glyph 提供,便于通过 CSS class 在项目中使用。对于偏好 Icon Font 的项目,这是一种方便的选择。

不建议在高流量生产环境中使用

Icon Font 包含全部图标,会显著增加应用包体积和加载时间。生产环境建议使用支持 tree-shaking 的构建工具,只包含实际使用的图标。也可以考虑使用某个框架对应的 package

使用 CSS 样式表

css
@import '@ycloud-web/icons-static/font/ycloud.css';
css
@import '~@ycloud-web/icons-static/font/ycloud.css';
html
<link
  rel="stylesheet"
  href="https://unpkg.com/@ycloud-web/icons-static@latest/font/ycloud.css"
/>
html
<link
  rel="stylesheet"
  href="/your/path/to/ycloud.css"
/>

使用 Icon Font

引入样式表后,就可以在 HTML 中通过对应的 CSS class 使用图标。每个图标都有对应的 class 名称用于显示。

例如,要显示 “home” 图标,可以使用下面的 HTML:

html
<div class="icon-house"></div>

JavaScript 示例

<!doctype html>
<html>
  <head>
    <title>YCloud Icons Icon Font</title>
  </head>
  <body>
    <main id="app"></main>
    <script type="module" src="/index.js"><\/script>
  </body>
</html>

基于 ISC 许可证发布。