iconfont使用

最近浏览到一个网页的菜单的小图标类似于如下的图标

查看源码但是没有发现图片的链接但是发现是类似于

<i class="iconfont">3</i>

这样的代码查询后发现这是iconfont图标学习了一下做一个小小的记录

1、去<a target=_blank href="http://www.iconfont.cn/">点击打开链接</a>icon的官方网站找到自己需要的图标：

<img src="https://img-blog.csdn.net/20160401161003759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

查询后得到

<img src="https://img-blog.csdn.net/20160401161050572?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

得到结果在图标上点选你需要的然后就可以到你的缓存架下载你所选择的东西点击下载项目然后<span style="font-family: Arial, Helvetica, sans-serif;">解压得到如下文件</span>

<span style="font-family: Arial, Helvetica, sans-serif;"><img src="https://img-blog.csdn.net/20160401161252182?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
</span>

<span style="font-family:Arial, Helvetica, sans-serif;">其中demo是一个使用的示例打开</span>

<span style="font-family:Arial, Helvetica, sans-serif;"><img src="https://img-blog.csdn.net/20160401161359198?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
</span>

<span style="font-family:Arial, Helvetica, sans-serif;">上边写出了使用的方法</span><span style="font-family: Arial, Helvetica, sans-serif;">将其中.eot 、.svg、 .ttf、 .woff 后缀的四个文件导入你的工程 </span>

<span style="font-family:Arial, Helvetica, sans-serif;"><img src="https://img-blog.csdn.net/20160401161503089?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
</span>

<span style="font-family:Arial, Helvetica, sans-serif;">修改对应的url指向你自己项目中对应的文件 </span>

<span style="font-family: Arial, Helvetica, sans-serif;">下方iconfont是图标的css控制项可以修改它 来修改他在页面上的显示方式</span>

<span style="font-family: Arial, Helvetica, sans-serif;">最后使用</span><pre name="code" class="html"><i class="icon iconfont">&#xe622;</i>

在html中使用就行

猜你喜欢