iconfont给旧项目加图标
时间: 2023-12-12 16:02:56 浏览: 243
要给旧项目加图标,可以使用iconfont提供的两种方式:
1. 下载图标字体文件,将文件放入项目中,然后在CSS中引用该字体文件,在HTML中使用相应的class即可显示图标。
2. 使用iconfont提供的SVG代码,在HTML中直接使用SVG代码即可显示图标。
具体的步骤如下:
1. 登录iconfont官网,选择需要的图标,将其添加到项目中。
2. 选择下载方式,选择“Symbol”选项,然后下载字体文件。
3. 解压下载的文件,将字体文件放入项目中,然后在CSS中引用该字体文件。
4. 在HTML中使用相应的class即可显示图标。
例如,如果你想使用一个名为“iconfont-home”的图标,可以在HTML中这样写:
```html
<i class="iconfont iconfont-home"></i>
```
在CSS中可以这样引用字体文件:
```css
@font-face {
font-family: 'iconfont';
src: url('iconfont.ttf') format('truetype');
}
```
如果你想使用SVG代码,可以在iconfont官网选择SVG代码下载方式,然后将代码直接复制到HTML中即可。
阅读全文