成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

阿里巴巴矢量圖標(biāo)庫（Iconfont）-利于UI和前端的搭配

goji / 1342人閱讀

摘要：首先我們需要找到這個(gè)網(wǎng)站打開之后看到的首頁大概是這個(gè)樣子里面有搜索框，首先先是來找圖標(biāo)設(shè)計(jì)，里面圖標(biāo)大都是免費(fèi)的，而且樣式多種多樣，打個(gè)比方我們搜索一個(gè)首頁的圖標(biāo)。

　　　　前端時(shí)間，做一個(gè)小網(wǎng)站的時(shí)候，需要用到很多小圖標(biāo)，UI設(shè)計(jì)好之后不知道如何使用，如果使用圖片那會(huì)很麻煩，相信一些前端更喜歡iconfont這樣的標(biāo)簽直接調(diào)用，這樣包括顏色和大小以及使用都更方便快捷，于是我們經(jīng)過交流之后決定使用阿里巴巴適量圖標(biāo)庫，這是我們第一次使用，也順便把經(jīng)驗(yàn)分享給大家，希望可以對(duì)一些前端有所幫助。

　　　　首先我們需要找到這個(gè)網(wǎng)站https://www.iconfont.cn/ 打開之后看到的首頁大概是這個(gè)樣子：

　　　　里面有搜索框，首先先是UI來找圖標(biāo)設(shè)計(jì)，里面圖標(biāo)大都是免費(fèi)的，而且樣式多種多樣，打個(gè)比方我們搜索一個(gè)首頁的圖標(biāo)。

　　　　在這里我們找到需要的合適的圖標(biāo)，將鼠標(biāo)放上去的時(shí)候會(huì)出現(xiàn)三個(gè)按鈕，就像這樣

?之后作為UI可以下載直接使用，當(dāng)然為了團(tuán)隊(duì)，也需要收藏，加入項(xiàng)目，這里可以自己新建一個(gè)項(xiàng)目，用來存放自己設(shè)計(jì)時(shí)用到的圖標(biāo)，之后再拉前端進(jìn)入這個(gè)項(xiàng)目。

　　　　

　　　　　接下來就可以看到UI設(shè)計(jì)時(shí)使用的所有圖標(biāo)了

　　　　使用它的方法也非常簡(jiǎn)單，我們首先需要引入上面的就js，這個(gè)js是阿里巴巴專門為你的項(xiàng)目生成的，每一個(gè)項(xiàng)目的地址都不一樣，而且包括這個(gè)項(xiàng)目里圖標(biāo)變動(dòng)也會(huì)影響地址需要更新，所以一旦確定使用之后盡量避免更改，之后我們?cè)趶?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>

　　　　當(dāng)然不只是這一種方法，個(gè)人覺得這種方法更好用，詳細(xì)說明請(qǐng)參考網(wǎng)站：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1165.html

相關(guān)文章

  • 我的前端規(guī)范系列-圖標(biāo)工程化[好用的圖標(biāo)]

    摘要：能快速修改和得到想要的圖標(biāo)圖標(biāo)命名規(guī)范化后編程人員可以很快配合找到想要的圖標(biāo)。圖標(biāo)設(shè)計(jì)規(guī)范圖標(biāo)要有重心根據(jù)不同的圖標(biāo)形狀類型使用不同的輪廓線，可以使圖標(biāo)之間保持一致的視覺效果。 為什么要有圖標(biāo)規(guī)范 1.文字和圖標(biāo)能更好的搭配使用圖標(biāo)是具有指代意義的圖形，也是一種標(biāo)識(shí)，即文字的一種延展，實(shí)際應(yīng)用中也常與文字一起配合使用,按字體標(biāo)準(zhǔn)規(guī)范化設(shè)計(jì)的圖標(biāo)更容易對(duì)齊。2.圖標(biāo)適配變得更簡(jiǎn)單，圖標(biāo)風(fēng)...

    shengguo 評(píng)論0 收藏0

  • 我的前端規(guī)范系列-圖標(biāo)工程化[好用的圖標(biāo)]

    摘要：能快速修改和得到想要的圖標(biāo)圖標(biāo)命名規(guī)范化后編程人員可以很快配合找到想要的圖標(biāo)。圖標(biāo)設(shè)計(jì)規(guī)范圖標(biāo)要有重心根據(jù)不同的圖標(biāo)形狀類型使用不同的輪廓線，可以使圖標(biāo)之間保持一致的視覺效果。 為什么要有圖標(biāo)規(guī)范 1.文字和圖標(biāo)能更好的搭配使用圖標(biāo)是具有指代意義的圖形，也是一種標(biāo)識(shí)，即文字的一種延展，實(shí)際應(yīng)用中也常與文字一起配合使用,按字體標(biāo)準(zhǔn)規(guī)范化設(shè)計(jì)的圖標(biāo)更容易對(duì)齊。2.圖標(biāo)適配變得更簡(jiǎn)單，圖標(biāo)風(fēng)...

    KunMinX 評(píng)論0 收藏0

  • Iconfont使用手冊(cè)

    摘要：下載并使用登錄，在我的項(xiàng)目中，共有三種形式，這里我一般選擇然后點(diǎn)擊下載至本地，會(huì)得到這樣一個(gè)文件夾。 Iconfont是阿里巴巴矢量圖標(biāo)庫，本文將簡(jiǎn)單介紹如何快速上手使用Iconfont，自從用上Iconfont后，圖片再也不糊了 起因 之前，項(xiàng)目中的logo等圖片資源都是UI小姐姐設(shè)計(jì)好后切給我，然后我將其引入項(xiàng)目中，如下形式： 但這種方式有一個(gè)弊端，就是圖片放大后，或者在高分辨率...

    Yang_River 評(píng)論0 收藏0

  • Iconfont使用手冊(cè)

    摘要：下載并使用登錄，在我的項(xiàng)目中，共有三種形式，這里我一般選擇然后點(diǎn)擊下載至本地，會(huì)得到這樣一個(gè)文件夾。 Iconfont是阿里巴巴矢量圖標(biāo)庫，本文將簡(jiǎn)單介紹如何快速上手使用Iconfont，自從用上Iconfont后，圖片再也不糊了 起因 之前，項(xiàng)目中的logo等圖片資源都是UI小姐姐設(shè)計(jì)好后切給我，然后我將其引入項(xiàng)目中，如下形式： 但這種方式有一個(gè)弊端，就是圖片放大后，或者在高分辨率...

    hiYoHoo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<