一、先认识三种形式字体图标
- unicode
是字体在网页端最原始的应用方式,如果用于图标,可支持按字体的方式去动态调整图标大小,颜色等等,但是因为是字体,所以不支持多色。
@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">3</span>
- font class
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。又因为本质上还是使用的字体,所以多色图标还是不支持的。
<link rel="stylesheet" href="./iconfont.css">
<span class="iconfont icon-xxx"></span>
- Symbol
一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。这种用法其实是做了一个 SVG 的集合。支持多色图标了,不再受单色限制。通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。但兼容性较差(支持IE9+和现代浏览器),另外浏览器渲染svg的性能也一般(还不如png)
<script src="./iconfont.js"></script>
<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>
二、实现的几种方法
- label标签(父级) - i标签+文字(子级)
- ::before(当素材是字体图标)
- li改前面(自定义,当素材是图片或字体图标)
- css定义背景(当素材是图片,设置span背景,将文字用padding-left偏移)