資訊專欄INFORMATION COLUMN
摘要：下載并使用登錄，在我的項目中，共有三種形式，這里我一般選擇然后點擊下載至本地，會得到這樣一個文件夾。
Iconfont是阿里巴巴矢量圖標庫，本文將簡單介紹如何快速上手使用Iconfont，自從用上Iconfont后，圖片再也不糊了起因
之前，項目中的logo等圖片資源都是UI小姐姐設計好后切給我，然后我將其引入項目中，如下形式：
但這種方式有一個弊端，就是圖片放大后，或者在高分辨率的顯示器下面會變得模糊，導致不夠清晰，對于一個有高要求高標準的場景而言，顯然是不夠的，于是團隊討論，決定用上Iconfont，這是一種矢量圖片庫，由UI小姐姐將圖片傳到阿里Iconfont網站，然后前端下載并引入即可，非常方便。
下載并使用登錄Iconfont，在我的項目中，共有三種形式，這里我一般選擇Font class, 然后點擊下載至本地，會得到這樣一個文件夾。
將下圖中五項copy出來，新建一個myfont文件夾（自定義命名，隨便你）
然后，在你的html頁面中引入進來
最后，在需要的地方使用即可
延伸
Iconfont網站上有很多開源的庫，別人已經設計好了，如果公司沒有UI設計師，你也可以選擇一套自己進行組裝，非常自由，當然，矢量庫還有，Font Awesome 等，也非常不錯，用法嘛，都是大同小異。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53329.html
摘要：下載并使用登錄，在我的項目中，共有三種形式，這里我一般選擇然后點擊下載至本地，會得到這樣一個文件夾。 Iconfont是阿里巴巴矢量圖標庫，本文將簡單介紹如何快速上手使用Iconfont，自從用上Iconfont后，圖片再也不糊了 起因 之前，項目中的logo等圖片資源都是UI小姐姐設計好后切給我，然后我將其引入項目中，如下形式： 但這種方式有一個弊端，就是圖片放大后，或者在高分辨率...
摘要：之前用的技術棧都是上找的的腳手架，第一次看項目的源碼。感覺一個文件里包含模板對應和樣式的組合方式，使得組件化更加明顯，也降低了平時項目中的小文件數量。相比于的，使用在原生標簽里插入屬性和一些模板表達式來展示數據，顯得簡潔了許多。 之前用的技術棧都是yeoman上找的webpack+react的腳手架，第一次看vue項目的源碼。感覺一個vue文件里包含html模板、對應JS和樣式的組合方...
摘要：與使用方式相比，具有如下特點兼容性良好，支持，及所有現代瀏覽器。相比于語意明確，書寫更直觀。不過因為本質上還是使用的字體，所以多色圖標還是不支持的。一、準備階段： a.進入阿里巴巴矢量圖標庫www.iconfont.cn挑選所需的圖標，加入購物車 b.點擊網頁中的購物車下載代碼 二、3種方法實現 Iconfont 的HTML顯示 Unicode 引用 Unicode...
摘要：方式和方式是極其相似的，只不過他們一個用的是圖標的字體編碼，一個用的是圖標的引用而已是使用了引用的類名，可在下載的中查看，或者可以在阿里矢量圖標庫的網站上，進入我的項目查看。 字體圖標iconfont阿里官網傳送門： http://www.iconfont.cn/打開首頁的小圖標好漂亮哦1）showImg(https://segmentfault.com/img/bVbghOc?w=1...
閱讀 3977·2021-09-22 16:03
閱讀 5311·2021-09-22 15:40
閱讀 1191·2021-09-06 15:02
閱讀 866·2019-08-30 15:53
閱讀 2215·2019-08-29 15:35
閱讀 1105·2019-08-23 18:22
閱讀 3333·2019-08-23 16:06
閱讀 643·2019-08-23 12:27
