引入iconfont字体图标以及微信引入情况

iconfont字体图标的使用方法

一、引言：

在网页开发中，会常常看到一些网页的图标，从而达到页面美观效果。目的是为服务器减少请求量，简化网页布局，会大量的运用到字体图标来更好的衬托（代替）文字，所以就会用到字体图标库，来使用字体图标。

主要使用阿里巴巴矢量字体图标库，展示讲解！但字体图标库还有很多 比如：bootstrap图标库、icomoon 图标库…

不同的字体图标库的图标引用方式都差不多，下面单对阿里图标库进行分析使用。

二、网站图标的下载和引入

1、下载

① ：首先进入 阿里巴巴矢量图标 官网。如图，新用户注册/登录即可。

② ：找到需要的字体图标，并加入仓库。（也可以搜你想要的字体图标，基本都有。）
③ ：将字体图标下载到本地，并拷贝到项目文件中，等待使用。下载后的文件，如图：

这里一定注意：路径 ！路径！ 路径！ 一定要链接对，否则图标不显示。特别注意字体规则的字体文件地址。

2、使用

当使用已下载好的字体图标文件时，可以有三种引用方式，Unicode编码方式 、Font class 字体类引用方式 和 Symbol 彩色图标引入方式。

（1）：Unicode编码方式参考步骤如下：
第一步：拷贝项目下面生成的 @font-face 规则。

@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 的样式。

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

第三步：挑选相应图标并获取字体编码，应用于页面。

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

效果图：

这样就完全🆗了！

（2）Font class 字体类方式引用参考步骤如下：
第一步：引入项目下面生成的 Fontclass 代码：

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

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont "></span>

把相应的类名，添加到对应标签类即可。
注：" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

（3） Symbol 彩色图标方式引入参考步骤如下：

Symbol 方法是当引入彩色图标时使用。如图：

第一步：引入项目下面生成的 symbol 代码下的 js文件：

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

第二步：加入通用的CSS 代码 ：

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

第三步：将相应图标并获取类名，应用于页面：

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

这样彩色的图标应用好了，必须用到一个特殊的H5标签，才能显示。

三、微信小程序引入字体图标

1、微信小程序引用字体图标的方式与网站略有区别，如果直接跟在网页上使用图标在小程序里用的话，会出现错误告诉你不加载本地文件类型的错误信息。

这样就得需要去一个网站做字体规则转换。

具体转换步骤如下：
step1:
下载好以后的字体图标文件目录，如图。文件目录可以看到，有一个.ttf类型的文件

step2:
访问在线字体转换官网，将iconfont.ttf 的文件类型做转换处理。

2、选择那个.ttf的文件，进行转换，然后会生成压缩文件，点击下载。

3、解压后，出现一下目录结构。

4、 将上图 stylesheet.css文件里的字体规则替换掉项目里的字体规则里，即可解决问题。