uniapp引用外部icon图标
方法一进入阿里巴巴矢量图标库添加所需使用的icon图标添加至项目中链接:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.22.进入我的项目中,复制Unicode中的代码至app.vue中@font-face {font-family: 'iconfont';/* project id 2431048 */src: ur
·
方法一 (直接引用)
- 进入阿里巴巴矢量图标库添加所需使用的icon图标添加至项目中
链接:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
2.进入我的项目中,复制Unicode中的代码至app.vue中
@font-face {
font-family: 'iconfont'; /* project id 2431048 */
src: url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.eot');
src: url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.woff') format('woff'),
url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.svg#iconfont') format('svg');
}
.iconfont {
/* font-family需要和自定义的相同 */
font-family: "iconfont" !important;
font-size: 24rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
3.使用
<text class="iconfont"></text>
方法二 (使用插件)
组件下载地址: https://ext.dcloud.net.cn/plugin?id=1393
1.组件目录(下载好的有两个文件iconfont.css/iconfont.vue,我这里将css里的文件直接放入vue中了)
- 调整iconfont.vue文件
<template>
<text class="iconfont" :class="'icon-' + name" :style="{ color: color, fontSize: size + 'px', fontWeight: bold ? 'bold' : 'normal',margin:margin }" @click="onClick"></text>
</template>
<script>
/**
* iconfont 图标
* @description 用于展示 iconfont 图标
* @property {Number} size 图标大小
* @property {String} type 图标图案,参考示例
* @property {String} color 图标颜色
* @event {Function} click 点击 Icon 触发事件
*/
export default {
name: 'iconfont',
props: {
name: {
type: String,
default: ''
},
size: {
type: Number,
default: 16
},
color: {
type: String,
default: '#fff'
},
bold: {
type: Boolean,
default: false
},
margin: {
type: String,
default: "3px"
},
index: {
type: Number,
default: 0
}
},
data() {
return {};
},
methods: {
onClick(e) {
this.$emit('click', e);
}
}
};
</script>
<style scoped>
@font-face {
font-family: 'iconfont'; /* project id 2431048 */
src: url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.eot');
src: url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.woff') format('woff'),
url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2431048_f5t7z3wm42j.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-rili:before {
content: "\e625";
}
</style>
替换style中的内容
1.复制项目中代码
2.下载至本地,将其中的iconfont.css文件打开并复制其中内容
3.使用
<iconfont name="rili" size="12" margin="0 3px"></iconfont>
//注意:在<script></script>中引入加上components: {iconfont,}
<script>
import iconfont from '@/components/zgwit-iconfont/iconfont.vue'
export default {
components: {
iconfont,
},
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
更多推荐
已为社区贡献6条内容
所有评论(0)