uniapp引用外部icon图标

方法一（直接引用）

进入阿里巴巴矢量图标库添加所需使用的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">&#xe625;</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>

uniapp引用外部icon图标相关推荐

uni-app引用外部图标库（阿里矢量图）
uni-app引用外部图标库(阿里矢量图) 作为前端程序员,nui-app是必备的,但是有时候内置的图标,组件又不完全满足,这里就可以引进外部图标,这里引用的是阿里矢量图标第一步,在项目目录中新建文 ...
uniapp引用外部js_Uniapp怎么引入外部js
Uniapp引入外部js的方法:首先新建一个indexl文件,引入外部js,代码为[]:然后打开manifest文件. 本教程操作环境:windows7系统.uni-app2.5.1版本,该方法适用于 ...
uni-app引用阿里巴巴官方图标库
最近在学习uni-app时,需要用到阿里巴巴的官方图标库,图标全部导入项目会使项目运行缓慢,因此使用网络路径的方式目录 1.阿里巴巴图标库 2.引入文件 3.使用图标 4.总结 1.阿里巴巴图标库 ...
uni-app引用外部css,在vue/uni-app中引入外部的css文件
一.在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 `` ...
uniapp 使用自定义icon图标
1.下载图标文件阿里图标库位置:iconfont-阿里巴巴矢量图标库 eg: 搜索 "书签" 图标,点击加入购物车,再进入购物车,填写加入项目,也可以直接下载,点击编辑编辑可以 ...
uniapp引用外部在线js
最近在搞uniapp项目,但遇到一个问题就是,不知道怎么用后台配置的js数据,就很头疼,在网上到处找方法,找到一个方法,但这个方法暂时仅发现对H5有效,微信小程序不支持这种写法,唉这个坑货其作用是 ...
在uniapp中如何使用icon图标
在uniapp中使用icon图标的方法:首先注册icon账号,挑选自己中意的图标加入购物车,加入购物车:然后添加到自己的项目中,选择[font-class]在新网址地址栏打开图片文件即可. 在unia ...
阿里巴巴矢量图标库icon图标在线引用
阿里巴巴矢量图标库icon图标在线引用写代码有时候不方便下载图标的时候可以直接引用阿里巴巴矢量图标库的图标,放在代码内具体步骤如下: 1.进入阿里巴巴矢量图标库选择需要的图标: 2.点击加入购物车 ...
uniapp h5、app引用外部在线js
uniapp h5.app引用外部在线js 1. H5 在app.vue var script = document.createElement('script'); script.src = &qu ...

uniapp引用外部icon图标

方法一（直接引用）

方法二（使用插件）

uniapp引用外部icon图标相关推荐

最新文章

热门文章

uniapp引用外部icon图标

方法一 （直接引用）

方法二 （使用插件）

uniapp引用外部icon图标相关推荐

最新文章

热门文章

方法一（直接引用）

方法二（使用插件）