使用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使用字体图标转码问题的更多相关文章

  1. VUE引入字体图标库

    1. 下载阿里图标 2. 解压文件,并复制文件到VUE项目内 3. 找到添加的字体图标的.css文件,将.iconfont改成[class^="iconfont"], [class ...

  2. vue 外部字体图标使用,无须绝对路径引入办法

    通常外部字体图标都在使用 iconfont ,这种图标在网上搜到一大把都是由于路径问题显示不出来,或者是显示个方块. 最近的项目中也碰到这个坑爸的问题,总结一下解决办法: 和 webpack.conf ...

  3. vue 中使用iconfont Unicode编码线上字体图标的流程

    1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然 ...

  4. vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标

    iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...

  5. vue中引入字体图标报错,找不到字体文件

    在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...

  6. vue之placeholder中引用字体图标

    先说一下问题:在placeholder中想使用字体图标,结果渲染不正确,代码如图 效果如图 在网上get到了解决方法: 在VUE组件中,给placeholder添加图标,需要注意以下几点: 1.不要给 ...

  7. vue中使用svg字体图标

    1.在src/ 下面新建目录icons,里面新建文件夹svg,和文件index.js .svg用于存放从iconfont下载下来的svg格式的图标,index.js用于引入使用到svg文件和对应的组件 ...

  8. vue项目打包部署elementUI的字体图标丢失问题

    自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...

  9. Vue+elementUI build打包部署后字体图标丢失问题

    错误描述:Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...

随机推荐

  1. SCOI2016 Day1 简要题解

    目录 「SCOI2016」背单词 题意 题解 代码 「SCOI2016」幸运数字 题意 题解 总结 代码 「SCOI2016」萌萌哒 题意 题解 总结 代码 「SCOI2016」背单词 题意 这出题人 ...

  2. 2017蓝桥杯 省赛D题(方格分割)

    6x6的方格,沿着格子的边线剪开成两部分.要求这两部分的形状完全相同. 如图:p1.png, p2.png, p3.png 就是可行的分割法.    试计算:包括这3种分法在内,一共有多少种不同的分割 ...

  3. js jquery数组去重

    数组去重建议直接使用jquery的 $.unique(arr);方法,此外比较好的方法是本文中的unique3方法比较快用了一个hash表,就是所谓的空间换时间.本文还提供了很多其他写法,都是大同小异 ...

  4. tyvj/joyoi 1336 火车进栈

    比原题水了很多(因为原题要高精度) 输出字典序前20种出栈序列. 其实是贪心题:我们每次确定一个出栈的数. 当栈里有数时,字典序显然比从后面拿数要小,所以先搜这个. 之后依次搜后面队列里的数,因为字典 ...

  5. Java 读数据库字段时发现的一个现象

    早上发现有一个网名叫“帅!是不需要理由”的一个人,在后台只能看到“帅!是不需要理”,“由”字就是不显示出来. 经过分析发现,在Access数据库中,name这个字段的长度是15,因为我知道Access ...

  6. (五)Oracle 的 oracle 表查询

    http://www.hechaku.com/Oracle/oracle_tables_chack.html 通过scott用户下的表来演示如何使用select语句,接下来对emp.dept.salg ...

  7. 浅谈 WebDriver如何应对不同浏览器

    selenium2 基于对象的测试,在selenium2中一共支持以下浏览器: Firefox(FirefoxDriver) IE(InternetExplorerDriver) Chrome(Chr ...

  8. 从 date 中取出 小时和分钟进行比较

    public class T1 { public static void main(String[] args) throws ParseException { SimpleDateFormat df ...

  9. 使用trash-cli防止rm -rf 误删除带来的灾难(“事前”非“事后”)

    trash-cli是一个使用 python 开发的软件包,包含 trash-put.restore-trash.trash-list.trash-empty.trash-rm等命令,我们可以通过这写命 ...

  10. window下域名解析系统DNS诊断命令nslookup详解

    Ping指令我们很熟悉了,它是一个检查网络状况的命令,在输入的参数是域名的情况下会通过DNS进行查询,但只能查询A记录和CNAME(别名)记录,还会返回域名是否存在,其他的信息都是没有的.如果你需要对 ...