CSS基础：浅用字体图标（以阿里字体图标库演示）

小猪弟

已于 2022-03-15 18:01:57 修改

阅读量1k

点赞数

分类专栏： CSS 文章标签： css 字体图标阿里字体图标字体图标实例 iconfont.css

于 2022-03-10 12:08:03 首次发布

本文链接：https://blog.csdn.net/u011863822/article/details/123398275

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

前面聊了一下精灵技术，虽然减少了请求服务器的次数，让用户有了一种错觉网速提高等优点，但是这个也有其弊端：

图片文件是很多小图标整合，所以图片本身很大。
图片本身在放大和缩小会失真。
还有一旦图片整合好的话，然后再网页引入后，想要修改的话可能有点复杂。

这个时候就有了一个技术出现，那就是字体图标(iconfont).

字体图标可以为前端又有了一种更加方便高校的图标使用方式：展示的是图标，本体属于字体。

看一下淘宝中购物车：

在这里插入图片描述

看着是一个图片，其实具有字体的特征。

可以通过浏览器工具调整一下其颜色：

在这里插入图片描述

可以看出和修改文字的颜色效果几乎差不多。

先说一下字体图标的优点：

轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就马上渲染出来，也减少了服务器的请求。
灵活性：本质就是文字，所以可以随意修改颜色，阴影等效果。
兼容性：毕竟本身就是文字的特征，几乎所有的浏览器都支持。

还有一句话要补充，虽然字体图标优点很多，但是不能替代精灵技术，只能对工作中图标部分技术的提升和优化。

简单的说就是结构和样式比较简单的小图标，就使用字体图标。如果结构和样式复杂的只能用到精灵图了。

字体图标下载

不要问我字体字体图标如何制作，客观原因：很多时候我们使用的是第三方的，主观原因：我也不会制作。

一般常用的网站有两个：

icomoon字体：网站：https://icomoon.io/

IcoMoon成立于2011年，推出了第一个自定义图标字体生成器，允许用户选择所需要的图标，使它们成为字型。该字库内容种类繁多，非常全面，但是却是国外服务器。

在这里插入图片描述

阿里 iconfont字库：https://www.iconfont.cn/

阿里M2UX的一个iconfont字体图标的字库，包含了阿里所有的图标库，可以使用AI制作图标上传生成。（重要的使免费）

在这里插入图片描述

下载步骤

步骤一：

注册一个账户。
步骤二：

选择自己喜欢的图标。

在这里插入图片描述

步骤三：

自己现在一个系列的坐标，然后进去如果就选择一个直接可以下载，如果向弄一组，就将其放入购物车，然后下载一组。
步骤四：

打开购物车下面有三个选择栏：

在这里插入图片描述

添加自己项目：可以将图标加入自己的项目，其实这个方便如果后期原来的一些项目的图标添加或者修改的话，可以通过管理整个项目进行修改。个人建议这种方式最好。如果没有项目可以创建一个。

下载素材：这个直接下载称图片，一般不会这样下载，毕竟打算使用字体图标了，就不会选择这个选项了。

下载代码：这个很简单就是下载字体图标的代码，其是一个压缩包，如果下载的解压后目录如下，也是字体图标可以使用的根本原因。

在这里插入图片描述

步骤五：

选择的是添加自己的项目后，打开导航栏中的资源管理，然后找到我的项目：

在这里插入图片描述

具体 Unicode,Font，Symbol三个有什么区别呢，看一下官网解释（以及使用步骤）：

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code

步骤六：

下载后解压文件目录是：

在这里插入图片描述

创建一个 fonts 文件夹，然后把第五步下载下来的文件，复制到 fonts 文件夹内即可。

其中 demo_index.html 和 demo.css 文件其实是可以不放入到项目中的，但是为了方便查看样式名称和对应图标，还是放入到项目中比较方便。如果你实在不想放到项目中，那就把它们删了吧，之后想查看图标样式就登录iconfont官网进入图标项目中查看即可。

例子使用

记得引入两行代码：

    <link rel="stylesheet" href="fonts/iconfont.css">
    <script src="fonts/iconfont.js"></script>

毕竟你导入了资源，这个地方就是引用的意思，简单理解的话，就是说类似java中的导入包。

然后看一下iconfont.css的内容：

在这里插入图片描述

然后引入到我们自己页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

    <link rel="stylesheet" href="fonts/iconfont.css">
    <script src="fonts/iconfont.js"></script>

    <style>
     .test{
         color: #d10000;
         font-size: 40px;
     }
    </style>

</head>
<body>
<div class="iconfont test"></div>

<hr>
<div class=" con-address-book test"></div>
<hr>
<!--这个地方才是真正的引入-->
<div class="iconfont icon-address-book test"></div>
</body>
</html>

在这里插入图片描述

但是在后面学过伪元素时候，如果在css中引用呢？

@font-face {
    font-family: "iconfont"; /* Project id 3235518 */
    src: url('自己放路径/iconfont.woff2?t=1646883009688') format('woff2'),
    url('自己放路径/iconfont.woff?t=1646883009688') format('woff'),
    url('自己放路径/iconfont.ttf?t=1646883009688') format('truetype');
}

选择器 ::after {
    content: "\e619";
    font-family: iconfont;/*这个一定要添加，不然不然不会显示*/
    
}