iconfont字型圖示幾種使用方式(阿里圖示庫)
阿新 • • 發佈:2018-12-21
先說一下優點: 1/圖示向量化,不用擔心失真問題 2/本質上是字型,可以用css控制圖示大小/顏色/陰影等 3/圖示豐富,也可上傳 [iconfont網站地址](http://www.iconfont.cn/) 註冊這裡就不說了,網上有很多資料講解,也很簡單,我就自己作為初學者感覺繞的地方說說。 一/ 如何下載iconfont圖示 首先將自己看中的圖示加入購物車——進入購物車——選擇“新增至專案”(如果沒有專案可以新建一個)——進入圖示管理介面 ![iconfont圖示管理介面](https://img-blog.csdnimg.cn/20181116094105732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ==,size_16,color_FFFFFF,t_70) 將下載的檔案解壓縮後,有如下檔案 ![下載的iconfont檔案](https://img-blog.csdnimg.cn/20181116094416144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ==,size_16,color_FFFFFF,t_70) 其中,demo_fontclass.html是對“font-class”的使用說明 demo_symbol.html是對“symbol”的使用說明 demo_unicode.html是對“unicode”的使用說明 大家可以下載檢視,我下面就將這三種用法說明一下 二/ “font-class”的使用(單色圖示建議用這個,書寫簡單直觀) 1.1.將下載的“iconfont.css”檔案(或整個下載的檔案)放入你的專案中,並引入需要該css檔案的html檔案中,例如 <link rel="stylesheet" href="css/iconfont.css"> 1.2.選擇相應圖示並獲取類名,應用於頁面 <i class="iconfont icon-xxx"></i> ("iconfont"是你專案下的font-family。可以通過“編輯專案”檢視並修改,預設是"iconfont"。) 2.我在專案中的使用 html程式碼: <li class="footer-home"><i class="iconfont icon-shejishi2" style="font-size:24px;"></i>首頁</li> <li class="footer-classify"><i class="iconfont icon-shejishi2" style="font-size:24px;"></i>分類</li> <li class="footer-shopping"><i class="iconfont icon-shejishi2" style="font-size:24px;"></i>購物車</li> <li class="footer-my"><i class="iconfont icon-shejishi2" style="font-size:24px;"></i>我的</li> css樣式: .wrap-footer ul li { display: inline-block; position: relative; width: 23%; height: 100%; font-size: 14px; font-size: 14px; color: #616161; text-align: center; line-height: 86px; } .icon-shejishi2 { font-size: 24px;//這麼寫是不起作用的 color: red;//修改顏色,只能是單色 position: absolute; left: 38%; top: -23px; } 出來的效果圖: ![效果圖](https://img-blog.csdnimg.cn/20181116100151786.png) **特別注意:修改字型圖示的大小要麼用行間樣式,如果用class選擇器要加!important(權重最高)** 三/ “unicode”的使用 1.1.將整個下載下來的檔案放入你的專案中(當然可以不用整個,放入需要的檔案就行,反正檔案不大我就都放進來啦) 1.2.在你需要小圖示的html檔案中引入如下的程式碼 <style> @font-face { font-family: 'iconfont'; src: url('iconfont/iconfont.eot'); //注意路徑,不可照搬 src: url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont/iconfont.woff') format('woff'), url('iconfont/iconfont.ttf') format('truetype'), url('iconfont/iconfont.svg#iconfont') format('svg'); } .iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } </style> 1.3在頁面中使用小圖示 <i class="iconfont">3</i> 2.我在專案中的使用 html程式碼 <li class="footer-home"><i class="iconfont" ></i>首頁</li> <li class="footer-classify"><i class="iconfont"></i>分類</li> <li class="footer-shopping"><i class="iconfont"></i>購物車</li> <li class="footer-my"><i class="iconfont"></i>我的</li> css程式碼 .wrap-footer ul li { display: inline-block; position: relative; width: 23%; height: 100%; font-size: 14px; font-size: 14px; color: #616161; text-align: center; line-height: 86px; } .iconfont { font-size: 24px !important;//權重最高 color: red; position: absolute; left: 38%; top: -23px; } 效果圖和上面一樣,不展示了 四/ “symbol”的使用 1.1.將下載的“iconfont.js”檔案(或整個下載的檔案)放入你的專案中,並引入需要該css檔案的html檔案中,例如 <script src="iconfont/iconfont.js"></script> 1.2.在你需要小圖示的html檔案中引入如下的程式碼 <style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } 1.3.在頁面中使用小圖示 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg> 2.我在專案中的使用 html程式碼(就放一個圖示吧) <li class="footer-home"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shejishi2"></use> </svg> 首頁 </li> css程式碼(和上面一樣) .wrap-footer ul li { display: inline-block; position: relative; width: 23%; height: 100%; font-size: 14px; font-size: 14px; color: #616161; text-align: center; line-height: 86px; } .icon { font-size: 24px !important; color: red; position: absolute; left: 38%; top: 6px; } 如果要使用多色圖示,可以參考這篇文章[Iconfont 多色圖示和漸變色圖示的應用](https://www.sohu.com/a/169212424_575744) 五/ Unicode字符集可以用在偽元素的content裡,同樣可以通過css改變大小/顏色等