vue使用字体图标转码问题
使用iconfont字体之后,出现的是一个方框,而没有出现相应的图标
需要通过String.fromCharCode方法转成指定unicode编码对应的十六进制字符
<div class="info-list">
<ul>
<li v-for="(val,key) in essay">
<i class="iconfont">{{String.fromCharCode(parseInt(val.font,16))}}</i>
<a href="javascript:void(0);">{{val.content}}</a>
<span>{{val.txt}}</span>
</li>
</ul>
</div>
data(){
return{
essay:[
{
font:'e7a5;',
content:'南京江宁楼盘中骏六号街区涉嫌',
txt:'2018-08-18'
},
{
font:'e7a5',
content:'北京江宁楼盘中骏六号街区涉嫌',
txt:'2018-09-18'
},
{
font:'e7a5',
content:'上海江宁楼盘中骏六号街区涉嫌',
txt:'2018-08-8'
},
{
font:'e7a5',
content:'广州江宁楼盘中骏六号街区涉嫌',
txt:'2018-08-28'
}
]
}
}
vue使用字体图标转码问题的更多相关文章
- VUE引入字体图标库
1. 下载阿里图标 2. 解压文件,并复制文件到VUE项目内 3. 找到添加的字体图标的.css文件,将.iconfont改成[class^="iconfont"], [class ...
- vue 外部字体图标使用,无须绝对路径引入办法
通常外部字体图标都在使用 iconfont ,这种图标在网上搜到一大把都是由于路径问题显示不出来,或者是显示个方块. 最近的项目中也碰到这个坑爸的问题,总结一下解决办法: 和 webpack.conf ...
- vue 中使用iconfont Unicode编码线上字体图标的流程
1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然 ...
- vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
- vue中引入字体图标报错,找不到字体文件
在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...
- vue之placeholder中引用字体图标
先说一下问题:在placeholder中想使用字体图标,结果渲染不正确,代码如图 效果如图 在网上get到了解决方法: 在VUE组件中,给placeholder添加图标,需要注意以下几点: 1.不要给 ...
- vue中使用svg字体图标
1.在src/ 下面新建目录icons,里面新建文件夹svg,和文件index.js .svg用于存放从iconfont下载下来的svg格式的图标,index.js用于引入使用到svg文件和对应的组件 ...
- vue项目打包部署elementUI的字体图标丢失问题
自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...
- Vue+elementUI build打包部署后字体图标丢失问题
错误描述:Vue+elementUI build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...
随机推荐
- BZOJ 5097: [Lydsy1711月赛]实时导航(最短路 + bitset)
题意 \(n\) 个点的有向图,边权 \(\in \{1, 2, 3, 4\}\) ,\(m\) 次修改边权/加边/删边,\(q\) 次询问:以 \(s_i\) 为起点,输出它到其他点的最短 ...
- Before NOIP 2018
目录 总结 刷题 2018 - 9 - 24 2018 - 9 - 25 2018 - 9 - 26 2018 - 9 - 27 2018 - 9 - 28 2018 - 9 - 29 2018 - ...
- iView 的分页结合表格用法
HTML: <Table border stripe ref="selection" :columns="columns" :data="now ...
- 【UVA】11400 照明系统设计 排序+dp
题目中有一个重要的信息是:每一种灯泡只能换成比它电压更大的灯泡,因此电压的大小限制了状态的转移.因此,在这里按照电压从小到大把每种灯泡排序,使得在考虑后面的灯泡时,前面的灯泡自然可以换成后面的灯泡.状 ...
- numpy学习之前的必要数学知识:线性代数
行列式 主要内容 1.行列式的定义及性质 2.行列式的展开公式 一.行列式的定义 1.排列和逆序 排列:由n个数1,2,…,n组成的一个有序数组称为一个n级排列,n级排列共有n!个 逆序:在一个排列中 ...
- PMP项目管理的49个过程,一张图让你全部了解
项目管理的49个过程,看表格显得比较单调,印象也不是很深,所以今天小编就给大家发一张图片,可以用一张图就能生动又详细的了解PMP项目管理的49个过程. 大家看完是不是觉得一目了然了呢,图片上传后不 ...
- 3.git 分支操作
1.git branch 查看分支 git branch -a 查看远程仓库分支 结果显示,只有一个master分支,项目刚开始默认只有一个分支,名字叫做master,一般都不会直接在master上 ...
- 定制kickstart重建CentOS7.5镜像用于U盘引导安装
有什么问题或者疑惑,可以留言,全力解答. ISO 镜像制作 U 盘安装盘 U盘安装CentOS7.4 U盘实现CentOS7.3全自动安装系统 https://www.cnblogs.com/pany ...
- String类中"=="、equals和普通类中"=="、equals的比较
package cn.method.demo; public class StringDemo2 { public static void main(String[] args) { String s ...
- VM中的Linux如何设置共享文件夹
1.点击[编辑虚拟机设置]-[选项]-[共享文件夹],选择“总是启用” 2.点击[确定],并重启系统,已经设置好了