官网字体图标传送门：https://uniapp.dcloud.io
先上效果图：
效果图
-
在iconfont中找到需要的图标，将其添加到项目中
添加到项目
-
在项目中复制Unicode
复制Unicode
-
将复制的代码粘贴到uni-app的
App.vue下的style标签下-
注：font-family可以自定义为你想要的名字（使用时需要用到）
复制到App.vue
-
-
在iconfont项目中复制你要使用的图标的代码，在uni-app中使用它
复制代码
<text class="icon"></text>
uni-app中使用
- 自定义图标的大小、颜色等样式
.icon {
/* font-family需要和自定义的相同 */
font-family: "iconfont" !important;
ont-size: 40upx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
增加新图标方法
- 将新的图标放到同一个项目中
- 复制新的代码替换
App.vue中的样式代码即可
替换样式代码
网友评论