uniapp引用iconfont图标库(阿里矢量图)

41次阅读次阅读
没有评论

第一步:进入阿里矢量图官网https://www.iconfont.cn/选择你需要的图标加入购物车,全部选择完毕后添加至项目 uniapp引用iconfont图标库(阿里矢量图) 第二步:进入我的项目中后选择Unicode后生成代码,粘贴至Uniapp项目中的App.vue中。 uniapp引用iconfont图标库(阿里矢量图) uniapp引用iconfont图标库(阿里矢量图)

/*每个页面公共css */
@font-face {
  font-family: 'iconfont';  /* Project id 2797372 */
  src: url('https://at.alicdn.com/t/font_2797372_unxwb953v3.woff2?t=1631074850573') format('woff2'),
       url('https://at.alicdn.com/t/font_2797372_unxwb953v3.woff?t=1631074850573') format('woff'),
       url('https://at.alicdn.com/t/font_2797372_unxwb953v3.ttf?t=1631074850573') format('truetype');
}
.iconfont {
  /* font-family需要和自定义的相同 */
   font-family: "iconfont" !important;
   font-size: 24rpx;
   font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face{}是你复制的代码,把url的链接前加上https:。iconfont里可以设置默认样式。

第三步:页面代码中可以直接引用iconfont的图标了,图标必须是你项目里的哈。

//为了不让网页直接渲染,我把icon图标的代码加了空格,细心点可以注意到,用的时候直接改成你自己的就行了。
<text class="iconfont">& # x e 6 0 d ;</text>
1
admin
版权声明:本站原创文章,由admin2021-09-08发表,共计1460字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
载入中...