欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

阿里图标库的使用

程序员文章站 2024-02-19 22:20:58
...

网址:https://www.iconfont.cn/plus/home/index
1.选取想要的图标,并加入项目
阿里图标库的使用
2.点击复制代码旁的更新代码
阿里图标库的使用
3.点击复制代码,将其复制到项目的css文件中
阿里图标库的使用
阿里图标库的使用
4.在css文件中还需加入以下代码,并调整其样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 35px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fe5e3a;
}

阿里图标库的使用
5.复制标签中的&#xec61
阿里图标库的使用
6.在页面中加入

<span class="iconfont">&#xec61;</span>

阿里图标库的使用
7.效果图
阿里图标库的使用