CSS---（字体图标，插画，背景图）阿里Iconfont在线图标使用

悠悠 2022-09-03 00:12 250阅读 0赞

## 一、搜索自己想要的图标 ##

> 进入官网：[https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2][https_www.iconfont.cn_home_index_spm_a313x.7781069.1998910419.2]

在搜索栏中寻找自己想要的图标，例如：金币；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70][]

你可以将其下载为png文件等在CSS代码中引用，但这里我要讲的是在线引用。

## 二、添加至项目 ##

将该图标加入到购物车（点击第一个，购物车）

![20210804143209225.png][]  
添加至项目

![20210804143301344.png][]

生成代码（该代码是在线的，因为我这里之前有图标，所以是更新代码）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70 1][]

> **值得注意的是没错有添加或者删除图标的操作都要更新一下代码，因为其CSS代码变了，相应的链接地址也变了**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70 2][]

## 三、使用 ##

我们刚刚复制了css文件的地址

1.这时我们可以像link普通css文件一样来链接该css

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70 3][]

2.使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70 4][]

点击复制代码，这个代码是选择器class的名字

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70 5][]

> 注意iconfont是一定要写的，因为当你看该css的源码时，你会发现都是基于iconfont这个选择器来设置样式的

3.效果

![20210804144627156.png][]

4.其他

因为该图标其实是字体，所以有关字体的样式设置均有效，如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70 6][]

[https_www.iconfont.cn_home_index_spm_a313x.7781069.1998910419.2]: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70]: /images/20220829/47991b3a268b471998d5a82ebfb066aa.png
[20210804143209225.png]: /images/20220829/364c80e0cad749a1ad121faff84b764a.png
[20210804143301344.png]: /images/20220829/19539de930a044018e211ade6d809503.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70 1]: /images/20220829/4d4c9f805e1c46058168f104d6b2f6ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70 2]: /images/20220829/319eb713e3614d14b5e79407a8731bee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70 3]: /images/20220829/b76a6896b14d4f1f8cb945dd8eab92b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70 4]: /images/20220829/dda16488164546e7ae507319e43aa287.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70 5]: /images/20220829/7ce3850e5de048ec8ef65338f9f48829.png
[20210804144627156.png]: /images/20220829/976274c666ea41f3a7b42132e1178ffb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70 6]: /images/20220829/37d679360d3d4c73aa5a38e1d39120e7.png