IconFont使用

IconFont優點:
相比加載許多圖片,IconFont將多個圖標合併到一個字體文件中,可以減少http請求,提高網頁性能;
因爲是字體,可自由的變換大小(字體大小即爲圖標大小)和顏色;
矢量圖不失真;
適用於多個平臺(瀏覽器、iOS App、Android App)。

IconFont缺點:
單色;
創建自己的字體圖標很費時間,維護成本高;
使用版權的限制,有的字體收費。

使用方法(這裏以阿里巴巴矢量圖標庫爲例。https://www.iconfont.cn/):
一、選擇圖標加入購物車,點擊購物車,選擇下載代碼,得到壓縮包如下:
在這裏插入圖片描述
二、將圖中框起來的四個文件,另存到本項目的文件夾中。這裏存儲在項目的font文件夾下。
三、打開iconfont.css文件,複製如下兩段代碼,並將url路徑修改爲步驟二的路徑,這裏是./font/

@font-face {font-family: "iconfont";
  src: url('./font/iconfont.eot?t=1589359495934'); /* IE9 */
  src: url('./font/iconfont.eot?t=1589359495934#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALIAAsAAAAABmQAAAJ6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApsgQ0BNgIkAwgLBgAEIAWEbQczG7YFEdWLabI/Qjhkg/4kRCJltUcf16Humx1DxDfsRt8DhpIrFOZf0CIhJXgDAAAAAIggWsuqZyaIClAlJ4OKH1kjC0+kHPsI9a8IJJFQCzW5tgueIIJEMn/LLdSOtjnxki4UNJKWoM8S+O4Nv79ZSUueiXBQ5ZIqTaHiQxnY9Q2wcJgvzbbqS0DUA+7GhBD9ZqC/7pKd5fXvYwDkkEmCAofTLlAgd0C53HP5XIoDSwM651gUWYGE3jB2wQu8T6DZkJpYi7fvJ4W9LBDn9MnDVAgoCks3CvUNe4t4YKsx3Uy/cD/6fvwMQyR1mV21+8SGY/qLnCxcOQ0IggsBHa5DRg2F2N+Y2AnBaFlzIo1xrPLgi68CkziqXrC/zi5tBQNQ8ExCT/SopQmUZHgIC5POJLV29x961QMvs//1Lh9cF6HsYI5XHnvb4nj8J4cb9GE2/qbuyUL7bPWlCRkpeiLwF84C1bn8037jSf+lw7KA97+8Hi2oLmRo3LUz+EXCgR3FENvGVDRhoysZmrQ0oVkzKrCn2+epmr77yYRGfXflajCYIWs0QSzUGuq0mEa9RotoNmXT4RY9rkCUJky6ChA6PUTSbh1Zp+fEQv2EOv1+o15ngGYHozNbUIc+IawYn1D/QDfjIFwzn+LyC8pXV1FeHNEfSFaHIXD9cjrBAWmJDfYtQ2YBgsYeYvAYdt0IE40GG3YV8xR5nmh6k9uM/eIEYcX4BPUP6GYcRDCYT5XPX1C+uoo6auqcDySrRwcBlz+AmCiGQTWP8op9yxCzAILGHsRgFnbdCKbmWQYbdqkJsSniOb3EUIW7var/gXzWgK0Vjj3ryfMdRsuLBQAAAA==') format('woff2'),
  url('./font/iconfont.woff?t=1589359495934') format('woff'),
  url('./font/iconfont.ttf?t=1589359495934') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./font/iconfont.svg?t=1589359495934#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

四、打開demo_index.html,挑選相應圖標並獲取字體編碼,應用於頁面。也可增加class,應用其他樣式。

<span class="iconfont">&#x33;</span>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章