阿里矢量图标库的正确食用方法

Author：喻城
发布时间：July 7, 2019
2511 views
No comments
799 words
Categories：谈天说地各类教程

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。

本文我们就来一起学习一下iconfont字体图标库的使用吧。

首先打开Iconfont-阿里巴巴矢量图标库

登录进去，我用的是自己的新浪微博账号。登录成功后，选择我的项目，去新建一个项目：

项目新建好了以后，内部还没有任何图标，接下来，我们可以类似淘宝购物一样去获取想要的图标。

看到你喜欢的图标，选择添加入库！

也可以直接在搜索栏进行图标的搜索！

挑选完毕之后，我们还需要把库里的图标添加至项目：

复制一下代码，接着在对应的页面中引入（begin主题在设置中填入即可开启）：

<link type="text/css" rel="styleSheet" href="//at.alicdn.com/t/font_578430_rar6t76yrc545cdi.css" />

图标引用：

<i class='iconfont icon-changpianCD'></i>

图标过大或过小可以用这个自己调节px大小

<i style="font-size:20px;" class='icon-changpianCD'>

如果是多色图标，就引入js文件，图标格式为：

<svg aria-hidden="true">
<use xlink:href="#icon-squirtle"></use>
</svg>

Wordpress菜单引用事例

Last modification：March 25, 2020

© Allow specification reprint

如果觉得我的文章对你有用，请随意赞赏

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

阿里矢量图标库的正确食用方法

喻城 • 2019 年 07 月 07 日

<p><img class="aligncenter size-full wp-image-736" src="https://www.sixx.cc/usr/uploads/2019/07/iconfont.png" alt="" width="716" height="297" style=""></p><p>Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。</p><p>本文我们就来一起学习一下iconfont字体图标库的使用吧。</p><p><strong>首先打开</strong><a href="https://www.iconfont.cn" target="_blank"  target="_blank" rel="noopener noreferrer">Iconfont-阿里巴巴矢量图标库</a></p><p><img class="alignnone size-full" src="https://p.ssl.qhimg.com/t01574d0a3fa4d070b9.png" width="913" height="383" /></p><p><strong>登录进去</strong>，我用的是自己的新浪微博账号。登录成功后，选择我的项目，去<strong>新建一个项目</strong>：</p><p><img class="alignnone size-full" src="https://p.ssl.qhimg.com/t013f6b9af7e6879c49.png" width="708" height="264" /></p><p><img class="alignnone size-full" src="https://p.ssl.qhimg.com/t019c62b0c06298c3f4.png" width="668" height="308" /></p><p><img class="alignnone size-full" src="https://p.ssl.qhimg.com/t01ba27bff887f2862d.png" width="463" height="481" /></p><p>项目新建好了以后，内部还没有任何图标，接下来，我们可以类似淘宝购物一样去获取想要的图标。</p><p>看到你喜欢的图标，选择<strong>添加入库</strong>！</p><p><img class="alignnone size-full" src="https://p.ssl.qhimg.com/t01dd3d13dbc99cc09f.png" width="204" height="180" /></p><p>也可以直接在搜索栏进行图标的搜索！</p><p><img class="alignnone size-full" src="https://p.ssl.qhimg.com/t0128cc094533b96b5a.png" width="300" height="128" /></p><p>挑选完毕之后，我们还需要把库里的图标添加至项目：</p><p><img class="alignnone size-full" src="https://p.ssl.qhimg.com/t011501c3a9cd83cae0.png" width="508" height="357" /></p><p><img class="alignnone size-full" src="https://p.ssl.qhimg.com/t017089698314ea765c.png" width="416" height="666" /></p><p><img class="alignnone size-full" src="https://p.ssl.qhimg.com/t01d7ae141477986bf3.png" width="770" height="454" /></p><p>复制一下代码，接着在对应的页面中引入（begin主题在设置中填入即可开启）：</p><div class="dp-highlighter nogutter"><div class="bar"></div><ol class="dp-css" start="0">
 	<li class="alt">&lt;link type=<span class="string">"text/css"</span> rel=<span class="string">"styleSheet"</span>  href=<span class="string">"//at.alicdn.com/t/font_578430_rar6t76yrc545cdi.css"</span> /&gt;</li>
</ol></div><p>图标引用：</p><div class="dp-highlighter nogutter"><div class="bar"></div><ol class="dp-css" start="0">
 	<li class="alt">&lt;i  class='iconfont <span class="string">icon</span>-changpianCD'&gt;&lt;/i&gt;</li>
</ol></div><p>图标过大或过小可以用这个自己调节px大小</p><div class="dp-highlighter nogutter"><div class="bar"></div><ol class="dp-css" start="0">
 	<li class="alt">&lt;i style=<span class="string">"font-size:20px;"</span> class='<span class="string">icon</span>-changpianCD'&gt;</li>
</ol></div><p>如果是多色图标，就引入js文件，图标格式为：</p><div class="dp-highlighter nogutter"><div class="bar"></div><ol class="dp-css" start="0">
 	<li class="alt">&lt;svg aria-<span class="string">hidden</span>=<span class="string">"true"</span>&gt;</li>
 	<li class="">  &lt;use xlink:href=<span class="string">"#icon-squirtle"</span>&gt;&lt;/use&gt;</li>
 	<li class="alt">&lt;/svg&gt;</li>
</ol></div><p><strong>Wordpress菜单引用事例</strong><br />
<img class="alignnone size-full" src="https://p.ssl.qhimg.com/t0135e898d25ad4ef53.png" width="385" height="375" /></p>