CSS核心（三十九）iconfont阿里字体图标的使用方法精讲

人亦已歌 · 发表于 2023-2-1 14:23:25

一、打开阿里图标网站

https://www.iconfont.cn

复制代码

二、注册账号并登录
三、搜索需要的图标，添加入库（一个项目中最好使用同一个系列的图标，这样整站的图标比较协调）

CSS核心（三十九）iconfont阿里字体图标的使用方法精讲

四、进入购物车，将选择的图标加入的项目中

CSS核心（三十九）iconfont阿里字体图标的使用方法精讲

五、选择fontclass，然后点击下载到本地

CSS核心（三十九）iconfont阿里字体图标的使用方法精讲

六、在项目目录中新建一个iconfont的文件夹，将下载的压缩包解压到该文件夹中。

CSS核心（三十九）iconfont阿里字体图标的使用方法精讲

七、引入并使用iconfont字体样式文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>iconfont图标使用方法精讲</title>
<!-- 第一步，引入iconfont/iconfont.css -->
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
<style>
        /* 第三步, 选择元素,然后像字体一样使用 */
        i.iconfont.icon-kefufill{
                font-size:100px;        
                /* font-weight:bold; */
                color:#86867f;
        }
</style>
</head>

<body>
<!-- 第二步、给页面中的标签添加类名 -->
<i class="iconfont icon-kefufill"></i>
</body>
</html>

注意第二步 class="iconfont icon-kefufill"，class中必须要有一个iconfont，而icon-kefufill的获取方法如下：

进入iocn网站，进入项目中，复制对应的图标类名

CSS核心（三十九）iconfont阿里字体图标的使用方法精讲