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