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

【前端开发】iconfont 阿里巴巴免费矢量图标库超级实用!国内功能很强大且图标免费内容很丰富的矢量图标库 阿里图标库 iconfont

大家好,欢迎来到IT知识分享网。

🚀 个人主页 极客小俊
✍🏻 作者简介:web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起学习和进步!😄
🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注

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

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

前言

之前我介绍过一款非常好用的前端开发图标字体库FontAwesome

但是除了它还有一款非常好用并且也是免费的图标字体库也是非常不错,并且我自己开发时也是经常在用,那就是iconfont 阿里巴巴矢量图标库 毕竟也要支持国产嘛,你说对不对!

官网地址: https://www.iconfont.cn/

如图

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

在使用之前必须先登录一下

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

没有账号的可以自己注册一下,用手机直接注册就OK了, 然后登录!

使用教程

下载图标字体

登录之后,我们通常在菜单栏中选择素材库里面的图标库 根据需求自己选择!

如图

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

然后根据自己的需求找一组自己觉得合适的图标,这里都有很多作者自己设计的图标字体

单色图标彩色图标

如图

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

这里我们一般采用的是单色图标, 因为可以根据自己的需求修改颜色,彩色图标就固定好了的!

当我们选择好了一组之后,点击进去,然后鼠标放到某个图标字体上之后,会出现三个选项按钮

如图

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

具体意思如下:

  1. 加入购物车
  2. 收藏
  3. 直接下载

其中这里的直接下载就是直接把这个图标当成文件图片的形式下载到本地进行使用, 你也可以根据需求调整颜色和图标格式, 支持svg、ai、png

如图

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

但是这样使用太麻烦,相当于图片一样了,我们还是需要下载它的图标字体格式

所以我们先要把想要用的图标添加到购物车

如图

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

然后点击右上角的购物车小图标

如图

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

侧边栏会弹出一个购物车清单页面,我们选择的图标字体就在这里

因为阿里巴巴矢量图标库它这里是以项目为一个单位,所以我们添加的图标要打包成一个项目给我们使用!

所以这里就直接点击添加至项目

如图

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

然后自定义新建一个项目名称, 建议用英文

如图

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

接着会自动跳转到你自己账号的项目管理页面, 你所新建的项目和添加到项目中的图标字体都在这里!

如图

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

我们直接点击下载到本地 就可以得到一个zip压缩文件,至此图标的下载完成了!

使用本地图标字体

当我们下载好之后,解压,并且重命名一个你自己比较好记忆的名称!

然后你会得到一堆文件

如图

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

其实到这里,就跟我们之前使用FontAwesome是一样的道理

我们只需要把这些文件拷贝到我们项目文件夹下就可以了!

如图

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

关于具体如何使用到我们的html页面中, 在打包解压出来的文件中有一个叫demo_index.html的文件

你可以打开它,里面全部都是你刚刚所添加的图标字体和具体的使用方式

并且它这里提供了三种使用方式:Unicode实体编码方式、FontClass类名称调用、Symbol

如图

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

这里我就以Unicode实体编码方式、FontClass类名称调用方式演示一下

Unicode实体编码方式调用

Unicode是字体在网页端最原始的应用方式,特点如下:

  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 默认情况下不支持多色,直接添加多色图标会自动去色。

我们可以使用CSS中的@font-face在页面上引入图标字体

例如

@font-face { 
    font-family: 'iconfont'; src: url('iconfont.woff2?t=60') format('woff2'), url('iconfont.woff?t=60') format('woff'), url('iconfont.ttf?t=60') format('truetype'); } 

也可以直接把iconfont.css文件通过link标签引入到我们的页面中

<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"> 

然后我们就可以使用了

调用方式

<span class="iconfont">Unicode实体编码</span> 

这里在标签中一定要加上classiconfont才有效果

至于Unicode实体编码名称你可以在刚刚的案例文档中招到

举个栗子

<style type="text/css"> #content { 
      width: 300px; border: 1px dotted red; padding: 10px; margin: 100px auto; text-align: center; } </style> <div id="content"> <span class="iconfont">&#xe614;</span> <span class="iconfont">&#xe615;</span> <span class="iconfont">&#xe616;</span> <span class="iconfont">&#xe617;</span> <span class="iconfont">&#xe618;</span> <span class="iconfont">&#xe619;</span> </div> 

效果如下

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

怎么样,是不是很简单,你再也不用担心图标的问题了!

FontClass类名称调用

FontClass类名称调用方式其实是 Unicode 使用方式的一种变种, 主要是解决Unicode书写不直观,语意不明确的问题

Unicode使用方式相比,具有如下特点:

  • 相比于Unicode语意明确,书写更直观,可以很容易分辨这个icon代表什么意思!
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

其实如果你仔细打开观察一下iconfont.css这个源码文件,你就会知道,其实里面就是对Unicode的有种封装

如图

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

调用方式

<span class="iconfont icon-xxx"></span> 

在文档页面中挑选相应图标并获取类名,应用页面元素就可以了!

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

举个栗子

<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"> <span class="iconfont icon-shujuzhanshi"></span> <span class="iconfont icon-xiangouhuodong"></span> <span class="iconfont icon-pingfen"></span> <span class="iconfont icon-dianpukanbanmoren"></span> <span class="iconfont icon-youhuiquan"></span> <span class="iconfont icon-XyuanhuodongD"></span> </div> 

效果跟刚刚是一模一样!

并且你也可以通过CSS去自定义他们的颜色和大小,可以说非常方便!

如下

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

最后

总的来说iconfont 阿里巴巴矢量图标库还是很不错的,但是缺点可能就是版权问题,如果你是学习那应该没什么问题,但是如果是商用,那么最好在使用这些图标之前先咨询一下作者,以免版权纠纷!

这一点我个人感觉确实是没有FontAwesome做得好,搞得不清不楚的真麻烦! 嘿嘿嘿~~

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

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


"👍点赞" "✍️评论" "收藏❤️"




大家的支持就是我坚持下去的动力!



如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,

欢迎一起交流学习❤️❤️💛💛💚💚

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


更多
好玩 好用 好看的干货教程可以
点击下方关注❤️
微信公众号❤️

说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!

🌽🍓🍎🍍🍉🍇

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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/157726.html

(0)
上一篇 2025-01-28 19:05
下一篇 2025-01-28 19:10

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信