uniapp引用iconfont矢量图
·
阿里矢量图网址:https://www.iconfont.cn/
1、先创建【我的项目】

2、 【选择图标】,【添加入库】,【添加至项目】

3、【下载至本地】
4、解压之后,把【iconfont.css】文件复制到uniapp的本地项目中

5、在步骤3的图中,选择【查看在线链接】

6、复制上述代码到 【iconfont.css】文件中,整个替换掉【@font-face】部分,并在【//】前追加【https:】,如下所示:

7、 在项目中的引用如下,可以使用style设置一些样式:
<template>
<view class="box">
<view class="iconfont icon-email">email</view>
<view class="iconfont icon-favorite" style="font-size:40px">favorite</view>
<view class="iconfont icon-search" style="color:blue;">search</view>
</view>
</template>
<script>
export default {
data() {return {}},
methods: {},
}
</script>
<style lang="scss" scoped>
@import '../../css/iconfont.css';
.box {
padding: 50rpx;
}
</style>

更多推荐
所有评论(0)