【笔记】CSS实现图标字体

发表于 更新于 阅读次数：

前言

CSS实现图标字体

准备工作

  • 图标字体文件iconfont.ttf

定义CSS

iconfont.css
1
2
3
4
5
6
7
8
9
10
11
12
13
@font-face {
  font-family: 'iconfont';
  src: url('iconfont.ttf');
}

.iconfont {
  font-family: 'iconfont';
  font-style: normal;
}

.icon-name::before {
  content: '\e100';
}

在HTML中引入图标

通过unicode定义

1
<i class="iconfont">&#xe100;</i>

通过class定义

1
<i class="iconfont icon-name"></i>

完成