uniapp使用iconfont字体库
时间: 2023-06-28 08:09:23 浏览: 218
uniapp+editor图标文件+iconfont.ttf
是的,UniApp可以使用iconfont字体库。您可以按照以下步骤进行操作:
1. 打开iconfont官网,选择您需要的图标,加入购物车并下载。
2. 解压下载的文件,将其中的iconfont.ttf文件放到项目的static文件夹中。
3. 在App.vue或main.js中引用iconfont.ttf文件,示例如下:
```
// App.vue
<style lang="scss">
@font-face {
font-family: 'iconfont';
src: url('./static/iconfont.ttf') format('truetype');
}
.iconfont {
font-family:"iconfont" !important;
font-size: 16px;
font-style: normal;
}
</style>
```
4. 在需要使用图标的地方,使用<i>标签并添加对应的类名,示例如下:
```
<i class="iconfont"></i>
```
其中,类名为“iconfont”,图标代码为“”。
注意:如果您在下载图标时选择了其他格式的文件,例如SVG或PNG,需要将文件转换为字体文件后才能在UniApp中使用。
阅读全文