npm包bem-font-awesome使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用图标非常常见，本文介绍了如何使用 npm 包 bem-font-awesome，来让我们的项目变得更加美观和方便。本文分为三个部分：

1. 简介

bem-font-awesome 是一个非常流行的基于 Font Awesome 的 BEM 包。它带有静态资源和样式表，使其非常易于使用。使用它，您可以快速添加具有响应性和可扩展性的图标到您的项目中。

BEM 是一种 CSS 样式命名方法论，它的目的是为了使 CSS classes 更加简短和可读。BEM 包可以让开发者使用这种类的命名方式，从而编写具有可维护性的模块化CSS代码。而 Font Awesome 则是一个流行的图标库，可以用于在网站中使用可定制的矢量图标。

要安装 bem-font-awesome，只需要运行以下命令：

npm install bem-font-awesome

一旦安装完成，我们可以在项目中使用相应的CSS，HTML 和 JavaScript。在HTML中，我们可以使用以下代码，并添加相应的 class:

<i class="fa fa-user"></i>

在 CSS 中，我们可以使用类似下面的代码：

.fa:before {
  font-family: "Font Awesome";
  content: "\f007";
}

这样，我们就可以将图标样式添加到项目中。值得注意的是，在样式表中，BEM 命名方式被使用，表示“块”，“元素”，“修饰符”。

要添加一个用户图标，我们可以这样写：

<i class="fa fa-user"></i>

CSS 中可以这样写：

.fa-user::before {
  font-family: "Font Awesome";
  content: "\f007";
}

这样，我们就可以得到一个在HTML页面上显示的用户图标。

因为 bem-font-awesome 基于 Font Awesome 库，所以您可以使用可定制的图标。例如，如果要添加一个红色的心形图标，可以这样写：

<i class="fa fa-heart is-red"></i>

CSS 中可以这样写：

.fa-heart.is-red:before {
  color: red;
  font-family: "Font Awesome";
  content: "\f004";
}

这样，我们就得到一个红色的心形图标。

bem-font-awesome 也可以根据我们的需要添加自定义的元素。例如，将图标环绕在链接中：

<a class="icon-link" href="#">
  <i class="fa fa-camera"></i>
  <span>Cameras</span>
</a>

CSS 中可以这样写：

.icon-link .fa-camera::before {
  font-family: "Font Awesome";
  content: "\f030";
  padding-right: 5px;
}

通过上面的代码，我们可以将相应的图标添加到链接中，这也可以从图标选择器中看到。

使用 npm 包 bem-font-awesome 可以让我们在项目中方便地添加图标。并通过 CSS 类的命名方式来让代码更加易读和灵活。同时还可以轻松地自定义 Font Awesome 图标。在实际开发过程中，建议开发者使用 BEM 命名方式来编写具有可维护性的模块化 CSS。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600555de81e8991b448d2eda