【Vue】 外部JSON資料引用Iconfont

Brown發表於2019-02-16
VueJSON

嘗試了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": "#"
              }

相關文章