如何在网页中插入字体图标

关于 - 字体图标

应用字体图标就是为了让页面更加精美简约，其实，字体图标和普通字体是一样的，完全可以按操作字体的方法来操作字体图标。

现在，较为常用的图标库有：
1，国内的阿里图标库，全部免费（白嫖怪福利）
2，国外的Icon Font，部分免费
所以，以阿里图标库来介绍，文章末尾也会提及 Icon Font（方法也是大同小异的）

阿里图标库

1，添加所需要的图标

2，提供3种方法插入字体图标

可以发现，不同方法的相同图标命名也不一样。
不过不要紧，任意挑选一个下即可，下载后可以通过打开 iconfont.html文件来查看帮助信息。

不同方法来插入字体图标：

1，受人以鱼，不如受人以渔，其实，下载后的文件里就说了如何使用；
2，如果还不知道如何使用，则可以参照本文，本文只作补充。

下载后文件的目录结构：

可以通过打开iconfont.html文件来获取帮助，里面有详细的步骤

iconfont.html

1，Unicode方法插入字体图标

将下面的CSS语句复制到项目中的CSS文件中（注意路径问题）。

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

定义字体图标的样式（这个也可以自己修改样式）：

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

插入到页面：

1，可以看出来，这种方法是使用Unicode编码来表示字体图标的，不能知名见义（Unicode编码可以在 demo_index.html 中查看，后面的类名等也可以这样查看）。
2， 所以，下面的 font-class 方法应运而生

<span class="iconfont">&#x33;</span>

2，font-class方法插入字体图标

1，可见，这种方法是通过指定的类名来指定图标的，所以，优点就是知名见义。
2，必须复制 iconfont.css 文件到项目中，且保证路径正确。
3，通过下面的语句导入。

<link rel="stylesheet" href="./iconfont.css">

这样，html页面中通过下面语句就可以插入图标的插入了：

<span class="iconfont icon-xxx"></span>

3，Symbol方法插入字体图标

优点就是：可以保留字体图标原有的颜色，也是未来发展的一种趋势，但是高版本的浏览器似乎不太支持。

1，道理是相同的，需要将iconfont.js导入到项目中，并保证路径正确，能够访问得到。

<script src="./iconfont.js"></script>

2，在html中定义字体图标的样式，在css文件中定义也是完全一样的（只需要去除style标签）：

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

3，可以复制下面的语句到插入位置，只需要修改其中的 xxx 即可。

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

特别注意：
1，其实，Symbol方式插入字体图标，插入的是一张svg格式的图片，所以，无法通过css样式的 font-size 等属性来修改文本样式，但是，可以通过修改图片的 width 和 height 来调整大小。
2，Symbol方式插入字体图标时，对于本身就有颜色的字体图标，是无法通过color属性来修改字体颜色的，但是对于本身就透明的字体图标，则可以通过color来修改。

回到前面提到的 iconfont.json 文件

1，这个文件可以用来后期修改或更新字体图标的
2，设想一下，如果你后期有其他需求的字体图标需要导入，但是又想保留原有的图标或部分保留，那么，就必须要有原来下载了哪些图标的记录，这样就可以很轻松的进行更新。
3，也可以通过修改 iconfont.json 文件来自定义字体名和表示字体图标的类名

关于国外的 IcoMoon 的补充：

下载后的目录结构：

上传该文件来更新字体图标的方法，操作完后，就像前面一样正常下载，重新导入项目即可：

有疑问，请留言！！！感谢阅读。