在前端开发中，图标的使用是经常遇到的问题。@bentley/icons-generic-webfont 是一款提供了丰富通用图标的 npm 包。本文将介绍如何在前端项目中使用 @bentley/icons-generic-webfont。
安装
使用 npm 安装 @bentley/icons-generic-webfont：
npm install @bentley/icons-generic-webfont
引入
CSS
在 HTML 的 head 标签中引入 @bentley/icons-generic-webfont/style.css 文件：
<head> <link rel="stylesheet" href="./node_modules/@bentley/icons-generic-webfont/style.css"> ... </head>
JavaScript
在 JavaScript 代码中引入 @bentley/icons-generic-webfont：
import "@bentley/icons-generic-webfont";
使用
图标名称
以下是 @bentley/icons-generic-webfont 中可用的图标名称及其对应的 Unicode 编码：
| 图标名称 | Unicode 编码 |
|---|---|
| icon-add | \f101 |
| icon-caret-down | \f102 |
| icon-caret-left | \f103 |
| icon-caret-right | \f104 |
| icon-caret-up | \f105 |
| icon-checkmark | \f106 |
| icon-clear | \f107 |
| icon-close | \f108 |
| icon-download | \f109 |
| icon-edit | \f10a |
| icon-expand | \f10b |
| icon-hamburger | \f10c |
| icon-home | \f10d |
| icon-more-horizontal | \f10e |
| icon-more-vertical | \f10f |
| icon-reload | \f110 |
| icon-search | \f111 |
| icon-settings | \f112 |
| icon-upload | \f113 |
使用示例
在 HTML 中使用 @bentley/icons-generic-webfont：
<span class="icon-add"></span>
在 CSS 中使用 @bentley/icons-generic-webfont：
.btn:before { font-family: "BentleyIconsWebfont"; content: "\f101"; }
指导意义
@bentley/icons-generic-webfont 在前端项目中提供了通用图标，使用方便。本文介绍了如何安装和使用 @bentley/icons-generic-webfont，帮助开发者快速了解并使用该 npm 包。同时，本文还提供了图标名称和对应的 Unicode 编码，方便开发者在项目中使用对应的图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa80b5cbfe1ea06104d5
