【前端开发】iconfont 阿里巴巴免费矢量图标库超级实用!

巴金斯 發表於 2025-8-17 13:12:00

【前端开发】iconfont 阿里巴巴免费矢量图标库超级实用!

<blockquote>
🚀 个人主页 极客小俊 
✍🏻 作者简介：web开发者、设计师、技术分享 
🐋 希望大家多多支持, 我们一起学习和进步！ 
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注
</blockquote>
<img src="https://img-blog.csdnimg.cn/direct/2a8b1ae942bc489d9ebb8b80d5aa1da4.png#pic_center" alt="" loading="lazy">
<h3 id="前言">前言</h3>
之前我介绍过一款非常好用的前端开发图标字体库<code>FontAwesome</code>
但是除了它还有一款非常好用并且也是免费的图标字体库也是非常不错,并且我自己开发时也是经常在用，那就是<code>iconfont 阿里巴巴矢量图标库</code> 毕竟也要支持国产嘛，你说对不对!
官网地址: https://www.iconfont.cn/
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/f87fbfb92f0d4222970e1099065f95b2.png#pic_center" alt="" loading="lazy">
在使用之前必须先登录一下
<img src="https://img-blog.csdnimg.cn/direct/807a7aa2c4f44fce8d5b33396b01df45.png#pic_center" alt="" loading="lazy">
没有账号的可以自己注册一下，用手机直接注册就OK了，然后登录!
<h3 id="使用教程">使用教程</h3>
<h4 id="下载图标字体">下载图标字体</h4>
登录之后，我们通常在菜单栏中选择<code>素材库</code>里面的<code>图标库</code> 根据需求自己选择!
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/a033c1773136476cbfb09de6b4f48db9.png#pic_center" alt="" loading="lazy">
然后根据自己的需求找一组自己觉得合适的图标，这里都有很多作者自己设计的图标字体
有<code>单色图标</code>和<code>彩色图标</code>
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/90a3ba7c7c75493185a427c9c76cfdf7.png#pic_center" alt="" loading="lazy">
这里我们一般采用的是<code>单色图标</code>, 因为可以根据自己的需求修改颜色，彩色图标就固定好了的!
当我们选择好了一组之后，点击进去，然后鼠标放到某个<code>图标字体</code>上之后,会出现三个选项按钮
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/4e98d037ef254c38b4827ac7aae7bd04.png#pic_center" alt="" loading="lazy">
具体意思如下:
<ol>
<li>加入购物车</li>
<li>收藏</li>
<li>直接下载</li>
</ol>
其中这里的<code>直接下载</code>就是直接把这个图标当成文件图片的形式下载到本地进行使用, 你也可以根据需求调整<code>颜色</code>和图标格式, 支持<code>svg、ai、png</code>
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/89d9d345b0aa4b0b88b639bb8bcdde14.gif#pic_center" alt="" loading="lazy">
但是这样使用太麻烦，相当于图片一样了，我们还是需要下载它的<code>图标字体格式</code>
所以我们先要把想要用的图标<code>添加到购物车</code>
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/8707e4468744489387d664ca1f297e7a.gif#pic_center" alt="" loading="lazy">
然后点击右上角的<code>购物车</code>小图标
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/0708fc460d0c441c9c0baf9b84eb8a92.png#pic_center" alt="" loading="lazy">
侧边栏会弹出一个购物车清单页面,我们选择的<code>图标字体</code>就在这里
因为<code>阿里巴巴矢量图标库</code>它这里是以项目为一个单位,所以我们添加的图标要打包成一个项目给我们使用!
所以这里就直接点击<code>添加至项目</code>
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/fb6f2ca8d5ee4d9ea2e86dd98f49262a.png#pic_center" alt="" loading="lazy">
然后自定义新建一个项目名称, 建议用英文
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/8043c2c756ac4a5f942db50f660634f7.png#pic_center" alt="" loading="lazy">
接着会自动跳转到你自己账号的项目管理页面, 你所新建的项目和添加到项目中的图标字体都在这里!
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/5167047a5e1045248181c3799aa42e70.png#pic_center" alt="" loading="lazy">
我们直接点击<code>下载到本地</code> 就可以得到一个<code>zip</code>压缩文件,至此图标的下载完成了!
<h4 id="使用本地图标字体">使用本地图标字体</h4>
当我们下载好之后，解压，并且重命名一个你自己比较好记忆的名称!
然后你会得到一堆文件
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/f806d464580e47498528db8f748a4902.png#pic_center" alt="" loading="lazy">
其实到这里，就跟我们之前使用<code>FontAwesome</code>是一样的道理
我们只需要把这些文件拷贝到我们项目文件夹下就可以了!
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/174a64577c5e4ad09f50cae2bd951743.png#pic_center" alt="" loading="lazy">
关于具体如何使用到我们的<code>html</code>页面中, 在打包解压出来的文件中有一个叫<code>demo_index.html</code>的文件
你可以打开它，里面全部都是你刚刚所添加的<code>图标字体</code>和具体的使用方式
并且它这里提供了三种使用方式:<code>Unicode实体编码方式、FontClass类名称调用、Symbol</code>
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/80767fb8d1ee41118b93da8d400dabdd.gif#pic_center" alt="" loading="lazy">
这里我就以<code>Unicode实体编码方式、FontClass类名称调用</code>方式演示一下
<h5 id="unicode实体编码方式调用">Unicode实体编码方式调用</h5>
<code>Unicode</code>是字体在网页端最原始的应用方式，特点如下：
<ul>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
我们可以使用<code>CSS</code>中的<code>@font-face</code>在页面上引入图标字体
<code>例如</code>
<pre><code class="language-css">@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1706238093360') format('woff2'),
 url('iconfont.woff?t=1706238093360') format('woff'),
 url('iconfont.ttf?t=1706238093360') format('truetype');
}
</code></pre>
也可以直接把<code>iconfont.css</code>文件通过<code>link标签</code>引入到我们的页面中
<pre><code class="language-html"><link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
</code></pre>
然后我们就可以使用了
<code>调用方式</code>
<pre><code class="language-html">Unicode实体编码
</code></pre>
这里在标签中一定要加上<code>class</code>为<code>iconfont</code>才有效果
至于<code>Unicode实体编码名称</code>你可以在刚刚的案例文档中招到
<code>举个栗子</code>
<pre><code class="language-html"><style type="text/css">
#content {
 width: 300px;
 border: 1px dotted red;
 padding: 10px;
 margin: 100px auto;
 text-align: center;
}
</style>

<div id="content">
&#xe614;
&#xe615;
&#xe616;
&#xe617;
&#xe618;
&#xe619;
</div>
</code></pre>
<code>效果如下</code>
<img src="https://img-blog.csdnimg.cn/direct/90c842f1ecf748c497ef40c95f5adbac.png#pic_center" alt="" loading="lazy">
怎么样，是不是很简单,你再也不用担心图标的问题了!
<h5 id="fontclass类名称调用">FontClass类名称调用</h5>
<code>FontClass类名称</code>调用方式其实是 <code>Unicode</code> 使用方式的一种变种, 主要是解决<code>Unicode</code>书写不直观，语意不明确的问题
与<code>Unicode</code>使用方式相比，具有如下特点：
<ul>
<li>相比于<code>Unicode</code>语意明确，书写更直观,可以很容易分辨这个icon代表什么意思!</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
</ul>
其实如果你仔细打开观察一下<code>iconfont.css</code>这个源码文件，你就会知道，其实里面就是对<code>Unicode</code>的有种封装
<code>如图</code>
<img src="https://img-blog.csdnimg.cn/direct/5f1ffd5c48404b70a44e801be89f1a54.png#pic_center" alt="" loading="lazy">
<code>调用方式</code>
<pre><code class="language-html">
</code></pre>
在文档页面中挑选相应图标并获取类名，应用页面元素就可以了!
<img src="https://img-blog.csdnimg.cn/direct/e58a053bf5b24d11b274a3d5a3a4d957.png#pic_center" alt="" loading="lazy">
<code>举个栗子</code>
<pre><code class="language-html"><style type="text/css">

#content {
 width: 300px;
 border: 1px dotted red;
 padding: 10px;
 margin: 100px auto;
 text-align: center;
}

#content>.icon-shujuzhanshi{
 color: yellow;
 font-size: 12px;
}

#content>.icon-xiangouhuodong{
 color: pink;
 font-size: 14px;
}

#content>.icon-pingfen{
 color: yellowgreen;
 font-size: 16px;
}

#content>.icon-dianpukanbanmoren{
 color: blue;
 font-size: 18px;
}

#content>.icon-youhuiquan{
 color: green;
 font-size: 20px;
}

#content>.icon-XyuanhuodongD{
 color: red;
 font-size: 22px;
}

</style>

<div id="content">






</div>
</code></pre>
效果跟刚刚是一模一样!
并且你也可以通过<code>CSS</code>去自定义他们的颜色和大小，可以说非常方便!
<code>如下</code>
<img src="https://img-blog.csdnimg.cn/direct/71ddfe2db04642008ad33f8006cfba06.png#pic_center" alt="" loading="lazy">
<h3 id="最后">最后</h3>
总的来说<code>iconfont 阿里巴巴矢量图标库</code>还是很不错的，但是缺点可能就是版权问题,如果你是学习那应该没什么问题，但是如果是商用，那么最好在使用这些图标之前先咨询一下作者，以免版权纠纷!
这一点我个人感觉确实是没有<code>FontAwesome</code>做得好,搞得不清不楚的真麻烦! 嘿嘿嘿~~
 
 
<center><img src="https://img2024.cnblogs.com/blog/1452855/202501/1452855-20250126161439455-1388601759.gif" style="width: 300px; border: 2px solid rgba(222, 222, 222, 1); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px"></center>
 
 
<center><img src="https://img2024.cnblogs.com/blog/1452855/202501/1452855-20250126161446905-1328118936.jpg" style="width: 300px; border: 2px solid rgba(222, 222, 222, 1); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px"></center>
<center><code>"👍点赞" "✍️评论" "收藏❤️"</code></center>
 
<center>大家的支持就是我坚持下去的动力!</center>
<hr>
<center>如果以上内容有任何错误或者不准确的地方，🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法， 欢迎一起交流学习❤️❤️💛💛💚💚</center>
 
 
<center>更多<code>好玩好用好看</code>的干货教程可以点击下方关注❤️微信公众号❤️
 说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
 🌽🍓🍎🍍🍉🍇
</center>
 
 
<center><img src="https://img2024.cnblogs.com/blog/1452855/202501/1452855-20250126161453252-1410007948.gif" style="width: 300px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px"></center>
 
 
<center><img src="https://img2023.cnblogs.com/blog/1452855/202305/1452855-20230510094258370-1243838426.png" style="width: 300px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px"></center>
 
 
<center><img src="https://img2024.cnblogs.com/blog/1452855/202501/1452855-20250126161458817-1269205291.gif" style="border: 2px solid rgba(222, 222, 222, 1); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px"></center> 
来源：https://www.cnblogs.com/GeekerJun/p/19043189

頁: [1]

琼殿技术论坛's Archiver

【前端开发】iconfont 阿里巴巴免费矢量图标库超级实用!