字体图标

unicode

拷贝css文件中的@font-face

1@font-face {
2  font-family: 'iconfont';
3  src: url('iconfont.ttf') format('truetype');
4}

定义iconfont的样式,设置font-family

1.iconfont {
2  font-family: "iconfont" !important;
3  font-size: 16px;
4  font-style: normal;
5  -webkit-font-smoothing: antialiased;
6  -moz-osx-font-smoothing: grayscale;
7}

挑选相应图标并获取字体编码,应用于页面
```
1<span class="iconfont">&#x33;</span>
```

Font class

引入项目下面生成的css样式

1<link rel="stylesheet" href="./iconfont.css">

挑选相应图标并获取类名,应用于页面
```
1<span class="iconfont icon-xxx"></span>
```

Symbol

引入项目下面生成的js样式
```
1<script src="./iconfont.js"></script>
```

加入通用的css代码,引入一次就行

1.icon {
2  width: 1em;
3  height: 1em;
4  vertical-align: -0.15em;
5  fill: currentColor;
6  overflow: hidden;
7}

挑选相应的图标并获取类名,应用于页面

1<svg class="icon" aria-hidden="true">
2  <use xlink:href="#icon-xxx"></use>
3</svg>

目录