介绍
Typicons 是一个免费的图标字体库，拥有超过 700 个精美的矢量图标，可用于 Web、移动端和桌面应用程序。通过 npm 包管理工具，在前端项目中轻松使用 Typicons。
安装
首先，在你的项目目录下打开终端窗口，并运行以下命令安装 Typicons：
npm install typicons.font
引用
在 HTML 文件中引用 typicons.css 和 typicons.font.js 文件即可开始使用 Typicons。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------- --------------- ----- ---------------- ---------------------------- ------- ------ ---- -- -------- -- --- ----- ------------ ------------------- ---- -- ---------- -- --- ------- ---------------------------------------- ------- -------展开代码
使用方法
1. CSS 类名
为了在网页中使用 Typicons 图标，需要将相应的图标类名添加到 HTML 元素中。例如，要使用“star”（星星）这个图标，可以在元素中添加 .typcn-star 这个类名：
<span class="typcn typcn-star"></span>
2. Unicode
Typicons 字体库还提供了一些 Unicode 实体，可以直接在 HTML 中使用。例如，要使用“star”（星星）这个图标，可以使用  这个 Unicode 实体：
<span class="typcn"></span>
3. JavaScript
Typicons 字体库还提供了一个 JavaScript API，可以动态生成图标。
const icon = require('typicons.font'); const myIcon = icon('star'); document.body.appendChild(myIcon);
示例代码
下面是一个完整的示例代码，演示如何使用 Typicons 图标：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------- --------------- ----- ---------------- -------------------------------------------------------- ------- ------ ---- -- --- -- --- ----- ------------ ------------------- ---- -- ------- --- ----- ----------------------------- ---- -- ---------- --- ------- -------------------------------------------------------------------- -------- ----- ---- - ------------------------- ----- ------ - ------------- ---------------------------------- --------- ------- -------展开代码
总结
Typicons 提供了超过 700 个精美的矢量图标，可以轻松地在前端项目中使用。通过 npm 包管理工具安装 Typicons 后，只需在 HTML 文件中引用相应的 CSS 和 JavaScript 文件，即可开始使用 Typicons。在网页中使用 Typicons 有多种方法，包括使用 CSS 类名、Unicode 和 JavaScript API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35268
