项目中引入图标库——Font Awesome,一套绝佳的图标字体库和CSS框架

项目中引入图标库——Font Awesome,一套绝佳的图标字体库和CSS框架

1、网址

官网——http://www.fontawesome/

npm地址——https://www.npmjs/package/font-awesome

菜鸟教程（Font Awesome 参考手册）——https://www.runoob/font-awesome/fontawesome-reference.html

下载至本地使用——https://static.runoob/download/font-awesome-4.7.0.zip

2、使用步骤

第一步：引包

npm i font-awesome

第二步：页面使用

1-官网示例

<i class="fa fa-window-restore" aria-hidden="true"></i>

效果

3、实例1

<i class="fa fa-car" style="font-size:60px;color:red;"></i>

效果

4、实例2

<i class="fa fa-window-restore window-icon"></i>

<style lang="less" scoped>
    .window-icon {
      width: 20px;
      height: 20px;
      font-size: 15px;
      font-weight: initial;
    }
    .window-icon:hover {
      color: var(--color-light);
    }
</style>

效果见图1