css字体图标的实现

梦里梦外; 2024-04-19 08:43 64阅读 0赞

# css字体图标的实现 #

## 1. ##

进入[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_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70][]  
下载对应字体图标的SVG文件

## 2. ##

进入创建字体图标的网站 [https://icomoon.io][https_icomoon.io]  
第一步：点击IcoMoon app 进入创建字体图标界面![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 1]  
第二步： 点击 import icons导入下载的SVG文件 ，然后在untitled set中选中导入的svg文件  
最后点击generate font创建字体图标![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 2]

## 3. ##

下载生成的字体图标压缩包  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 3]

## 4. ##

打开字体图标压缩包中的 demo.html 文件可以看到对应字体图标的实例，下图红框内代表字体图标对应的类名  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 4]

## 5. ##

在代码中使用字体图标，只需要把字体图标压缩包中的 fonts文件夹和 style.css 文件放到同一目录下然后在代码中连接 style.css 文件在标签中使用相应类即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 5]

## 6. 效果展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 6]  
可以通过改变style.css 文件中对应类的 color 和font-size 来改变字体图标的颜色和大小

[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_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8d2c78fc3508415a822c81b5f3eae4f4.png
[https_icomoon.io]: https://icomoon.io
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e14a9eafe8984cc19581f13f0c78f27e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/83f1657b4f0a49a3b8be0d26392e6281.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/bdc891330e5e46fab233b8091dc45347.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/21cc6a8cd35d4bafa881603887240b1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0e2878de20ae452ead5baf54704d171c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7c9e01d295814e76941739488c630489.png