【Vue】 外部JSON数据引用Iconfont

2024年1月13日 211次阅读 来源: Brown

尝试了uniclde方式之后发现动态写入的字符编码渲染成了字符串，我怀疑有可能是引入的顺序导致的字符编码没有被编译。
尝试了官网给得第二张方法 FontClass，坑的地方就是官方只给了一个地址
//at.alicdn.com/t/font_703595_fkypz725vpa.css
但是并没有告诉我怎么使用，无意中在另一位同学的代码中看到那个地址出现在了CSS里面的import里。好吧，我就是很菜。第三种方法还没有搞懂那个地址是引用在哪里的，在js里import里报错，暂时把坑放在这里，之后来填吧…

在CSS中引用

@import '//at.alicdn.com/t/font_703595_fkypz725v

在DOM结构中通过class引用

    <h1 :class="'iconfont icon-' +item.icon">{{item.title}}</h1>

外部json的数据结构

              {
                "title": "云主机 UHost",
                "icon": "yuanhuan",
                "descrition": "高性能、稳定、低成本；提供多种机型满足不同业务需求",
                "link": "#"
              }, {
                "title": "容器集群 UDocker",
                "icon": "database",
                "descrition": "支持自由创建和管理容器集群",
                "link": "#"
              }
    原文作者：Brown
    原文地址: https://segmentfault.com/a/1190000015260394
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞