使用 iconfont 字体图标

使用阿里巴巴矢量图标库

原创已于 2025-01-30 21:57:04 修改 · 611 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#UI框架

于 2019-04-19 15:22:35 首次发布

UI 库专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在项目中使用阿里巴巴矢量图标库中的图标，包括搜索、下载和更改图标类名的过程，使开发者能够轻松地在网页中应用高质量的图标资源。

使用字体图标的话，就可以使用字体相关的属性来设置图标的 css 属性了。

在阿里巴巴矢量图标库 https://www.iconfont.cn/ 中搜索需要的图标。
点击图标加入购物车。
点击右上角打开购物车，添加图标到指定的项目。
选择 Font class 这种方式，点击下载至本地。
复制文件到项目中指定的目录下（例如：根目录下的 styles/iconfont 下），即可在项目中使用。

<link type="text/css" rel="styleSheet"  href="./styles/iconfont/iconfont.css" />

<i class='iconfont icon-shouye'>

更改图标的类名：

// iconfont.css 是复制到项目下的其中一个文件
@font-face {
  font-family: "iconfont"; /* Project id 3747006 */
  src: url('iconfont.woff2?t=1667457451471') format('woff2'),
       url('iconfont.woff?t=1667457451471') format('woff'),
       url('iconfont.ttf?t=1667457451471') format('truetype');
}

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

.icon-shouye:before {
  content: "\eaf0";
}

可以任意更改某个图标的类名。

// 假设将 iconfont.css 中的 icon-shouye 改为 icon-home
.icon-home:before {
  content: "\eaf0";
}

// 在 index.html 中使用
<link type="text/css" rel="styleSheet"  href="./styles/iconfont/iconfont.css" />

<i class='iconfont icon-home'>