mpvue 中使用 iconfont

静态页面

如果是静态写入 html 的图标可以直接使用 unicode 方式引用，将生成的代码写入app.vue的样式内即可：

// app.vue
<style>@font-face {font-family 'iconfont' /* project id 796664 */src url('//at.alicdn.com/t/font_796664_ekixfyr2isj.eot')src url('//at.alicdn.com/t/font_796664_ekixfyr2isj.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_796664_ekixfyr2isj.woff') format('woff'), url('//at.alicdn.com/t/font_796664_ekixfyr2isj.ttf') format('truetype'), url('//at.alicdn.com/t/font_796664_ekixfyr2isj.svg#iconfont') format('svg')}.iconfont {font-family 'iconfont'font-size 16pxfont-style normalcolor #9e9595}
</style>

JSON 数据动态注入

无论是本地 JSON 还是异步请求到的数据，都无法用 unicode 方式正确编译图标，这时可以使用 Font class 方式引用，当然在 Vue 原生中首推这种方式引用，但是在 npvue 中受限于小程序，无法直接使用@import引入生成的样式链接，不过通过一个小步骤也可以解决：

获取链接代码

将获取到的代码保存在本地路径下assets/style/iconfont.css

引用本地文件

// app.vue
<style>@import 'assets/styles/iconfont.css'</style>

动态写入图标

<span :class="['iconfont','icon-'+item]" v-for="(item, index) in goodsData.info.label" :key="index"></span>

更新库

新增图标后只要重新获取生成链接的代码即可

转载于:https://juejin.im/post/5b9b26616fb9a05d2c43993e

mpvue 中使用 iconfont相关推荐

如何在微信小程序中使用iconfont
开篇废话开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...
[转]mpvue中的小程序调用系统自带查看图片的功能
mpvue中的小程序调用系统自带查看图片的功能这里举个栗子: <template><div class="keting"><div class=&q ...
iconfont 图标转为字体_App 中使用 Iconfont 的整套方案
作者:集美貌与才华于一身的小芳什么是Iconfont 我们通常看到的图标都是以图片形式集成到项目中使用,而 Iconfont 是一套字体图标,和我们使用自定义字体的方式是一样的,并且它是一种矢量图 ...
uni 加入图标_uniapp中引入 iconfont
下载图标在项目下添加common公共文件把解压的iconfont.css 文件放在common目录下在common目录下创建font文件,把加压的除了iconfont.css 文件放进去(不要放 ...
vue组件制作专题 - （mpvue专用）在mpvue中纯自己写css实现简单左右轮播
在mpvue中纯自己写css实现简单左右轮播 CSDN:jcLee95 邮箱:291148484@163.com 项目中,在src目录下的components目录下新建一个新文件并重命名为jcmv-c ...
如何在openlayers中使用iconfont或font Awesome字体图标
目录前言 1.准备工作 2.新建一个最简单的helloworld页面 3.看看效果 4.注意点1-需使用Unicode写法 4.注意点2-需注意iconfott.woff2的请求顺序 5.特殊图标的 ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
在小程序中使用iconfont
在微信小程序中使用iconfont 在前端开发中,一定会用到iconfont,相对于图片来说,所占取的空间更加,更能节省性能 iconfont网址: 首先进入iconfont官网,输入你想要的图标找 ...
style-component中引入icon-font步骤以及出现方块问题的解决
在style-component中引入icon-font: 将下载好的iconfont压缩包,将其中的文件拷贝到项目相关目录下(一般是statics),并将iconfont.css改为iconfont ...
如何在Axure中使用Iconfont图标字体
需求背景在原型设计中,图标是我们使用率非常高的元素,通常我们会选择将图标导出为图片放到Axure里使用,或者使用Axure的图标元件库,但是他们使用起来会有很多不方便的地方: 图片进行缩放会失真,无 ...

mpvue 中使用 iconfont

mpvue 中使用 iconfont

静态页面

JSON 数据动态注入

获取链接代码

引用本地文件

动态写入图标

更新库

mpvue 中使用 iconfont相关推荐

最新文章

热门文章