安利Iconfont-阿里巴巴矢量图标库

最新推荐文章于 2025-03-08 10:00:00 发布

祝福纱雾荼梻

最新推荐文章于 2025-03-08 10:00:00 发布

阅读量725

点赞数

CC 4.0 BY-SA版权

分类专栏： css样式

本文链接：https://blog.youkuaiyun.com/weixin_41355260/article/details/86747738

css样式专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍如何从iconfont.cn官方下载图标字体，包括登录GitHub、添加图标至库、生成及下载代码压缩包等步骤。并提供了渐变效果的CSS代码示例，强调在项目定稿后再生成代码的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方下载地址:www.iconfont.cn

登录github

添加想要的图标至库

添加至项目

找到下载到的代码压缩包，解压

demo的教程指导已经很详细了。

支持渐变效果：

.icon_lists .icon {
  display: block;
  height: 100px;
  line-height: 100px;
  font-size: 42px;
  margin: 10px auto;
  color:#43C5EC;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
 /*以下代码实现渐变*/
  background-image:-webkit-linear-gradient(10deg,#43C5EC,#2378FA,greenyellow); 
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent; 
}

注意：

1、附上渐变文字代码的n种实现方式：http://www.php.cn/css-tutorial-408797.html 基于css3

2、一旦在项目中添加了新的图标，就要重新生成代码，所以最好定稿之后再生成代码下载到本地哦

制作自己的小图标：

https://segmentfault.com/a/1190000014800339