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

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

1、网址

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

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

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

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

2、使用步骤

第一步：引包

npm i font-awesome

第二步：页面使用

1-官网示例

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

效果

3、实例1

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

效果

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
2
3
4
5
6
7
8
9
10
11
12
13

效果见图1