字体图标和外链字体的应用

前端页面上面包屑制作方法一般有两种，第一种就是用背景图定位。第二种就是字体图标，也就是下面介绍的。

文字前面的图标

一、制作 icofont

• 打开icomoon官网 IcoMoon：https://icomoon.io/app/#/select
  
  下载

• 解压后保留的文件

  
  
  

  fonts 里面放的是字体，style 里面是引用字体的。demo.html 是用法。

二、icofont 的使用

• 新建一个font.html 文件，用来测试。
• 复制 style.css 文件里面的内容放进 font.html 里面，用<style></style>引用。
  

• 浏览器打开 demo.html 复制图标

  
  
  

  粘贴放进到HTML内容，使用font-family引用字体。

  
  
  打开测试如图：
  

三、制作面包屑小图标

一般不直接放进文字内容里，应该使用 CSS3 的 before 或 after。

实验结果

四、自定义字体样式

我们发现官网的字体样式不是很多，在公司里肯定有小姐姐给画，然后我们字体转化在用。现在我们去阿里妈妈拿，毕竟那里图标比较丰富。

下载一个 svg 图标。icomoon 官网只支持 SVG的转换。

导入：

使用方法同上。注意下的字体是彩色的，但字体图标不能是彩色的。

五、字体使用

同上。

六、另一种方法

小程序中引入外部字体
https://mp.weixin.qq.com/s/5-7M6xj9pZLoR3X3NGVjqA