使用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. python学习日记(迭代器、生成器)-乱七八糟

    迭代器 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退 ...

  2. 使用kubeadm安装Kubernetes

    Docker安装 yum install -y yum-utils yum-config-manager --add-repo https://docs.docker.com/v1.13/engine ...

  3. mysql 提示表损坏处理方法

     公司网站有些页面打不开,第二次出现这个情况 重启数据库,提示有一个表crashed:这是第二次出现这个问题,这个时候,进入数据库文件目录输入:myisamchk -r "Table_Nam ...

  4. [loj6388] 「THUPC2018」赛艇 / Citing

    Description ​ 给你一个\(~n \times m~\)的\(~01~\)矩阵,一个人在这个矩阵中走了\(~k~\)步,每一次都往四联通方向中的一个走一步.给定这个人每一步走的方向,已知这 ...

  5. Hdoj 2190.悼念512汶川大地震遇难同胞——重建希望小学 题解

    Problem Description 下面是512汶川大地震部分受灾学校伤亡情况(惨痛!!) 1. 四川省都江堰市 聚源中学 伤亡情况:遇难学生人数(含失踪)320 详细说明: 一栋教学楼被震垮,该 ...

  6. 「SDOI2014」Lis 解题报告

    「SDOI2014」Lis 题目描述 给定序列 \(A\),序列中的每一项 \(A_i\) 有删除代价 \(B_i\) 和附加属性 \(C_i\). 请删除若干项,使得 \(A\) 的最长上升子序列长 ...

  7. cf366C Dima and Salad (dp)

    是一个01分数规划的形式,只不过已经帮你二分好了. 把b乘过去,再减回来,找和等于0的a的最大值就行了 #include<bits/stdc++.h> #define pa pair< ...

  8. [Vani有约会]雨天的尾巴(树上差分+线段树合并)

    首先村落里的一共有n座房屋,并形成一个树状结构.然后救济粮分m次发放,每次选择两个房屋(x,y),然后对于x到y的路径上(含x和y)每座房子里发放一袋z类型的救济粮. 然后深绘里想知道,当所有的救济粮 ...

  9. MOSFET的半桥驱动电路设计要领详解

    1 引言 MOSFET凭开关速度快.导通电阻低等优点在开关电源及电机驱动等应用中得到了广泛应用.要想使MOSFET在应用中充分发挥其性能,就必须设计一个适合应用的最优驱动电路和参数.在应用中MOSFE ...

  10. kafka命令行脚本使用

    zookeeper集群部署:http://www.cnblogs.com/ding2016/p/8280696.html kafka集群部署:http://www.cnblogs.com/ding20 ...