Font Awesome 使用指南

Font Awesome （简称FA）是一套图标库，有这些优良的特性：
除了让用户可以在1000多个高质量图标内选择图标之外
无极缩放。 如何字体一样使用图标，指定大小即可，不必担心变大后图标变形的问题
可以指定颜色，背景色，就如同字体一样
实际上，技术上来说，这套图标不再是一个个的图片，而是一套字体，如同文字一样的使用它。

开始使用

CDN方式引入

<link
    rel="stylesheet"
    href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"/>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

安装包方式引入

yarn add @fortawesome/fontawesome-free

main.js
//引入font-awesome样式
import '@fortawesome/fontawesome-free/css/all.min.css'

使用:
直接在vue页面内通过i标签使用
<i class="fa fa-server" style="font-size:60px;color:red;"></i>
<i class="fas fa-clock"></i>

进阶用法(在element-ui中使用)

<img src="../assets/img/1571229046731.png" alt="1571229046731" style="zoom: 67%;" />

regular.scss (用于Regular-空心图标)

/*!
 * Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */

i[class^="el-icon-far"], i[class*=" el-icon-far"] {
  font-family:"Font Awesome 5 Free Regular" !important;
  display: inline-block;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

$fa-css-prefix: "el-icon-far";
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";

@font-face {
  font-family: 'Font Awesome 5 Free Regular';
  font-style: normal;
  font-weight: 400;
  font-display: $fa-font-display;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

.far {
  font-family: 'Font Awesome 5 Free Regular';
  font-weight: 400;
}

solid.scss (用于Solid-实体图标)

/*!
 * Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */

i[class^="el-icon-fas"], i[class*="el-icon-fas"] {
  font-family:"Font Awesome 5 Free Solid" !important;
  display: inline-block;  
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

$fa-css-prefix: "el-icon-fas";
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";

@font-face {
  font-family: 'Font Awesome 5 Free Solid';
  font-style: normal;
  font-weight: 900;
  font-display: $fa-font-display;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

.fa,
.fas {
  font-family: 'Font Awesome 5 Free Solid';
  font-weight: 900;
}

brands .scss (用于Brands -商标图标)

/*!
 * Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */

i[class^="el-icon-fab"],
i[class*="el-icon-fab"] {
  font-family: "Font Awesome 5 Free Brands" !important;
  display: inline-block;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

$fa-css-prefix: "el-icon-fab";
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";

@font-face {
  font-family: "Font Awesome 5 Free Brands";
  font-style: normal;
  font-weight: 400;
  font-display: $fa-font-display;
  src: url("#{$fa-font-path}/fa-brands-400.eot");
  src: url("#{$fa-font-path}/fa-brands-400.eot?#iefix")
      format("embedded-opentype"),
    url("#{$fa-font-path}/fa-brands-400.woff2") format("woff2"),
    url("#{$fa-font-path}/fa-brands-400.woff") format("woff"),
    url("#{$fa-font-path}/fa-brands-400.ttf") format("truetype"),
    url("#{$fa-font-path}/fa-brands-400.svg#fontawesome") format("svg");
}

.fa,
.fab {
  font-family: "Font Awesome 5 Free Brands";
  font-weight: 400;
}

main.js (引入)

// FontAwesome
import "./styles/fontAwsome/solid.scss";
import "./styles/fontAwsome/regular.scss";
import "./styles/fontAwsome/brands.scss";
import "font-awesome/scss/font-awesome.scss";

使用

<template>
  <div>
    <i class="el-icon-fas-clock"></i>
    <i class="fas fa-clock"></i>
    <el-button icon="el-icon-fas-clock"></el-button>
    <el-button icon="el-icon-fab-adn"></el-button>
  </div>
</template>

细节的把控

icon图标的大小是 由字体大小决定的，也就说我们通过font-size来控制icon图标的大小，font-awesome也提供了对应的规格类大小，更适用。

<i class="fas fa-clock fa-2x"></i>
<el-button class="fa-2x" icon="el-icon-fab-adn"></el-button>