1. 首页首页
  2. 编程日记编程日记

2025年字体图标库css（css 字体库）

编程日记 • • 阅读 2

字体图标库css（css 字体库）字体图标是一些网页常见的小图标 可以直接从网上下载 字体图标的使用可以分为 1 字体图标的下载 2 字体图标的引入 引入到 html 页面中 3 字体图标的追加 就是添加新的小图标 推荐下载网站 icomoon 字库 https icomoon io 阿里 iconfont 字库 https www iconfont cn spm a313x



字体图标是一些网页常见的小图标，可以直接从网上下载。

字体图标的使用可以分为：
1）字体图标的下载
2）字体图标的引入，引入到html页面中。
3）字体图标的追加，就是添加新的小图标。


推荐下载网站：

  • icomoon字库

https://icomoon.io/
在这里插入图片描述

  • 阿里iconfont字库
    https://www.iconfont.cn/?spm=a313x.fonts_index.i3.2.7f7b3a81ptg2Pw
    在这里插入图片描述

下面看看怎么从icomoon字库网站下载。
访问icomoon官网：
在这里插入图片描述

IcoMoon App：
在这里插入图片描述

跳转到了下面的页面：
在这里插入图片描述

自己想要的图标，可以选择多个，在页面的下发显示选择了多少个图标：
在这里插入图片描述

如果这里边的图标不够用的，可以拉倒页面底部， Add Icons From Library：
在这里插入图片描述

就打开了库的窗口：
在这里插入图片描述

想要哪个模块的，就 Add：
在这里插入图片描述

就会自动添加过来，供我们选择：
在这里插入图片描述

除了选择图标以外，还可以在线编辑图标。
上面的Edit：
在这里插入图片描述

在这里插入图片描述

自己想要编辑的图标：
在这里插入图片描述

就跳出来编辑界面：
在这里插入图片描述

可以旋转、移动、缩放、改变颜色：
在这里插入图片描述

在这里插入图片描述

编辑完毕，就变成自己想要的效果了：
在这里插入图片描述

不想编辑了，选择箭头：
在这里插入图片描述

现在选择了22个图标：
在这里插入图片描述

要把这些选中的图标生成字体，右下角的 Generate Font F：
在这里插入图片描述

就跳转到了下面的页面：
在这里插入图片描述

页面右下方的Download按钮，就可以下载了：
在这里插入图片描述

这个文件下载下来，就表示下载成功了：
在这里插入图片描述

下载完毕之后，注意原先的文件不要删，后面会用。

将下载下来的icomoon.zip文件解压后，得到如下目录结构：
在这里插入图片描述

最重要的文件夹是fonts文件夹，进去，有4个不同的字体文件：
在这里插入图片描述

之所以有4种字体文件，是为了兼容不同的浏览器，因为不同的浏览器支持的字体格式是不一样的。字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

在这里插入图片描述

将字体文件引入到页面的语法：

 
  
在这里插入图片描述
 
  
打开字体图标解压包中的demo.html文件，我们下载下来的字体图标都有展示：
 在这里插入图片描述
 
  
想用哪个图标，就拷贝右侧的小框框到html文件中，这个小框框就是字体图标的特殊符号：
 在这里插入图片描述
 
  
在这里插入图片描述
 
  
在样式中给使用字体图标的素指定字体，必须和@font-face中font-family指明的一样：
 在这里插入图片描述
 
  
现在打浏览器中查看，字体图标就正确显示出来了：
 在这里插入图片描述
 
  
既然字体图标本质是字体，那么就可以随意指定大小、颜色，例如：
 在这里插入图片描述
 
  
现在的展示效果：
 在这里插入图片描述
 
  
咱们如法炮制，在html中再加一个字体图标：
 在这里插入图片描述
 
  
在这里插入图片描述
 
  
展示效果：
 在这里插入图片描述
今天的文章 
  2025年字体图标库css（css 字体库）分享到此就结束了，感谢您的阅读。 
  

                    


                    


                    

                        

                            

                                编程小号
                            

                            

                                

                                    
                                        
                                    
                                

                            

                        

                    

                


                

                    
                    
                    

                        
                        

                             上一篇
                            2025-12-05 21:40
                        

                    

                    
                    


                    
                    
                    

                        
                        

                            下一篇 
                            2025-12-05 21:33
                        

                    

                    
                    
                


                

                    
相关推荐

                    
                

                

                    

                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，
                        请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/27140.html