【仿站】图标问题处理
Iconfont图标获取和引用
后文介绍了三种图标获取和引用的方式，如果网站用得是iconfont网站（阿里巴巴矢量图标库）的图标，则下面方法适用。
unicode图标获取和引用
1 获取
对于引用iconfont网站（阿里巴巴矢量图标库）图标的网站，通过浏览器查审元素功能，在源码<head>部分，找出iconfont url。
为了避免有遗漏（有的网站可能存在嵌套框架），继续从网络中寻找
进一步，采用插件校验： https://blog.luckly-mjw.cn/tool-show/iconfont-preview/iconfont-preview.user.js
启动插件后，刷新页面，会显示引用的资源地址。
通过上述三种方法，就能确定网站所引用的图标库文件。在浏览器打开，并将其另存为，然后在自己项目引入文件即可。
2 配置
unicode 是字体在网页端最原始的应用方式，特点是：
- 兼容性最好，支持 IE6+，及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小，颜色等等。
注意：新版iconfont支持彩色字体图标，兼容所有现代浏览器。详见：https://www.iconfont.cn/help/article_detail?article_id=7
unicode使用步骤如下：
第一步：拷贝项目下面生成的font-face
@font-face {font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
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;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">3</i>
那么问题来了，你知道什么图标对应什么字体编码吗？
打开网站：Iconfont Preview (luckly-mjw.cn)
或者找一个Iconfont 在线解析网站
点击 解析本地 ttf、woff、woff2、otf 文件，导入刚才下载的文件，即可进行解析
就能知道对应图标的代码了。
3 注意事项
如果一个网站引用了多个图标库文件，那么在设置的时候，要分开设置
后续引用的时候，使用<i class="iconfont">value</i> 或者 <i class="iconfont2">value</i> 来使用图标
iconfont2是font3里面的图标，iconfont是font2里面的图标
font-class 图标获取和引用
font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
与unicode使用方式相比，具有如下特点：
- 兼容性良好，支持ie8+，及所有现代浏览器。
- 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：
第一步：通过忘了请求和页面head获取引用地址
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
第二步：挑选相应图标并获取类名，应用于页面：
<i class="iconfont icon-xxx"></i>
网站是通过这种方式引用的话，可以查审元素定位，查看它应用的图标名是什么
symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过
font-size,color来调整样式。 - 兼容性较差，支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般，还不如png。
使用步骤如下：
第一步：获取symbol代码URL
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步：加入通用css代码（引入一次就行）：
<style type="text/css">
.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>
图文件引用
如果网页上的图标支持右击另存为，则可以保存为本地图片，然后引入。
为了实现文字和图片的垂直居中，可以使用以下样式包裹图片和文字
.menu-item-content {
/* SVG+TEXT */
display: flex;
align-items: center;
height: 100%;
}
.icon-aside {
/* svg图标 */
opacity: 0.6;
width: 16px;
height: 16px;
margin-right: 8px;
}
如果实在找不到一模一样的图标，那就去iconfont.cn 找一个最相似的图标引入吧。
浙公网安备 33010602011771号