資訊專欄INFORMATION COLUMN
摘要：首先我們需要找到這個網站打開之后看到的首頁大概是這個樣子里面有搜索框，首先先是來找圖標設計，里面圖標大都是免費的，而且樣式多種多樣，打個比方我們搜索一個首頁的圖標。
前端時間，做一個小網站的時候，需要用到很多小圖標，UI設計好之后不知道如何使用，如果使用圖片那會很麻煩，相信一些前端更喜歡iconfont這樣的標簽直接調用，這樣包括顏色和大小以及使用都更方便快捷，于是我們經過交流之后決定使用阿里巴巴適量圖標庫，這是我們第一次使用，也順便把經驗分享給大家，希望可以對一些前端有所幫助。
首先我們需要找到這個網站https://www.iconfont.cn/ 打開之后看到的首頁大概是這個樣子：
里面有搜索框，首先先是UI來找圖標設計，里面圖標大都是免費的，而且樣式多種多樣，打個比方我們搜索一個首頁的圖標。
在這里我們找到需要的合適的圖標，將鼠標放上去的時候會出現三個按鈕，就像這樣
?之后作為UI可以下載直接使用，當然為了團隊，也需要收藏，加入項目，這里可以自己新建一個項目，用來存放自己設計時用到的圖標，之后再拉前端進入這個項目。
接下來就可以看到UI設計時使用的所有圖標了
使用它的方法也非常簡單，我們首先需要引入上面的就js，這個js是阿里巴巴專門為你的項目生成的，每一個項目的地址都不一樣，而且包括這個項目里圖標變動也會影響地址需要更新，所以一旦確定使用之后盡量避免更改，之后我們在復制一段css放到頁面上
<style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } style>
之后我們就可以正常使用icon了，使用方法可以調用
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx">use> svg>
當然不只是這一種方法，個人覺得這種方法更好用，詳細說明請參考網站：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1165.html
摘要：能快速修改和得到想要的圖標圖標命名規范化后編程人員可以很快配合找到想要的圖標。圖標設計規范圖標要有重心根據不同的圖標形狀類型使用不同的輪廓線，可以使圖標之間保持一致的視覺效果。 為什么要有圖標規范 1.文字和圖標能更好的搭配使用圖標是具有指代意義的圖形，也是一種標識，即文字的一種延展，實際應用中也常與文字一起配合使用,按字體標準規范化設計的圖標更容易對齊。2.圖標適配變得更簡單，圖標風...
摘要：能快速修改和得到想要的圖標圖標命名規范化后編程人員可以很快配合找到想要的圖標。圖標設計規范圖標要有重心根據不同的圖標形狀類型使用不同的輪廓線，可以使圖標之間保持一致的視覺效果。 為什么要有圖標規范 1.文字和圖標能更好的搭配使用圖標是具有指代意義的圖形，也是一種標識，即文字的一種延展，實際應用中也常與文字一起配合使用,按字體標準規范化設計的圖標更容易對齊。2.圖標適配變得更簡單，圖標風...
摘要：下載并使用登錄，在我的項目中，共有三種形式，這里我一般選擇然后點擊下載至本地，會得到這樣一個文件夾。 Iconfont是阿里巴巴矢量圖標庫，本文將簡單介紹如何快速上手使用Iconfont，自從用上Iconfont后，圖片再也不糊了 起因 之前，項目中的logo等圖片資源都是UI小姐姐設計好后切給我，然后我將其引入項目中，如下形式： 但這種方式有一個弊端，就是圖片放大后，或者在高分辨率...
摘要：下載并使用登錄，在我的項目中，共有三種形式，這里我一般選擇然后點擊下載至本地，會得到這樣一個文件夾。 Iconfont是阿里巴巴矢量圖標庫，本文將簡單介紹如何快速上手使用Iconfont，自從用上Iconfont后，圖片再也不糊了 起因 之前，項目中的logo等圖片資源都是UI小姐姐設計好后切給我，然后我將其引入項目中，如下形式： 但這種方式有一個弊端，就是圖片放大后，或者在高分辨率...
閱讀 1458·2021-11-24 09:39
閱讀 1775·2021-11-22 15:25
閱讀 3728·2021-11-19 09:40
閱讀 3283·2021-09-22 15:31
閱讀 1288·2021-07-29 13:49
閱讀 1192·2019-08-26 11:59
閱讀 1308·2019-08-26 11:39
閱讀 919·2019-08-26 11:00
