uniapp引用iconfont图标

不得不说uniapp引入iconfont确实比较坑。下面方法可行：

引入方法：

1.在confont官网找好图标，然后点击复制代码，

2.点击红圈的复制代码后在网页打开，出现如下：

3.然后再uniapp项目下新建common文件夹,common文件夹下新建iconfont.css。把2步打开的代码复制到iconfont.css。记住要将iconfont.css文件内url路径转换为在线路径即加上https:如下：

4.在App.vue中全局引入该文件@import "./common/iconfont.css",

5.接着在组件中引用就可以了

<text class="iconfont icon-tuikuanshouhou"></text>

效果：

转载于:https://www.cnblogs.com/lwming/p/11329266.html

uniapp引用iconfont图标相关推荐

uni-app引用外部图标库（阿里矢量图）
uni-app引用外部图标库(阿里矢量图) 作为前端程序员,nui-app是必备的,但是有时候内置的图标,组件又不完全满足,这里就可以引进外部图标,这里引用的是阿里矢量图标第一步,在项目目录中新建文 ...
iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
uniapp项目中引用iconfont图标，实现信号强度图标展示（离线使用）
效果选择图标加入项目在项目设置中勾选base64和彩色,取消其它项查看生成的代码可以复制这一段代码,然后在项目中以这种方式使用 <text class="iconfont&qu ...
微信小程序如何引用iconfont图标
最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是: @font-face {font-family:'iconfont';src:url('iconfont.eot');s ...
HTML中引用iconfont图标
目录一.unicode引用二.font-class引用 1.打开iconfont官网找到所需图标 2. 3. 4. 5.生成代码一.unicode引用 1.拷贝项目下面生成的font-face ...
Uni-App - 使用 iconfont 图标或者自定义图标
一.阿里巴巴图标矢量库注意事项: 1.修改项目内的图标字体名称(iconfont 是 uni 的关键字暂不能用). 2.使用网络字体. 二.项目使用 1.拷贝iconfont.css 文档到项目中, ...
uni-app引入iconfont图标
我们需要在iconfont官网中下载自己需要的图标然后解压出来这个我们需要这几个文件在uni项目中根目录下的static下创建文件夹名字叫iconfont 将这里这个iconfont.css改名 ...
uniapp引入iconfont图标
步骤打开阿里适量图库https://www.iconfont.cn/,找到需要的图标,加入购物车,并把图标加入一个项目在这里插入图片描述点击"生成代码",生成font-fac ...
vue引用iconfont图标
1.把图标下载到本地解压,把里边的文件拷贝到static下(建议新建一个asstes文件夹专门存放,文件目录如下) 2.打开iconfcont.css修改url,把data开头的删除了,不然会报错 3 ...

uniapp引用iconfont图标

uniapp引用iconfont图标相关推荐

最新文章

热门文章