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

极客小俊

于 2024-01-26 14:18:51 发布

阅读量3k

点赞数 20

分类专栏： CSS技术专题 HTML+CSS 工具与插件文章标签： CSS 图标字体库插件工具 HTML 前端开发 ui设计矢量图

本文链接：https://blog.csdn.net/windowsxp2018/article/details/135864969

版权

工具与插件同时被 3 个专栏收录

32 篇文章 28 订阅

订阅专栏

CSS技术专题

8 篇文章 0 订阅

订阅专栏

HTML+CSS

7 篇文章 0 订阅

订阅专栏

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

前言

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

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

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

如图

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

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

使用教程

下载图标字体

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

如图

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

有单色图标和彩色图标

如图

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

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

如图

具体意思如下:

加入购物车
收藏
直接下载

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

如图

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

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

如图

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

如图

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

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

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

如图

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

如图

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

如图

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

使用本地图标字体

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

然后你会得到一堆文件

如图

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

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

如图

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

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

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

如图

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

Unicode实体编码方式调用

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

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

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

例如

@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');
}

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

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

然后我们就可以使用了

调用方式

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

这里在标签中一定要加上class为iconfont才有效果

至于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>

效果如下

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

FontClass类名称调用

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

与Unicode使用方式相比，具有如下特点：

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

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

如图

调用方式

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

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

举个栗子

<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>