前端页面上面包屑制作方法一般有两种，第一种就是用背景图定位。第二种就是字体图标，也就是下面介绍的。
文字前面的图标
一、制作 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
网友评论