首頁(yè)?>?知識(shí)?資訊?>?三個(gè)免費(fèi)的線上icon 讓網(wǎng)頁(yè)設(shè)計(jì)師更輕松?>?正文

三個(gè)免費(fèi)的線上icon 讓網(wǎng)頁(yè)設(shè)計(jì)師更輕松

2020/12/6 0:14:22 · 稿源:傳誠(chéng)信

icon在網(wǎng)頁(yè)里頭是非常重要的小尖兵,就像我們?cè)诎儇浌纠锩?必需要靠這些圖示來(lái)清楚我們的所在位置,要去哪里? 下一個(gè)地方在何處? 但是一旦圖示需要的量越來(lái)越大,且顏色上又要有不同的區(qū)分,同一個(gè)icon又要運(yùn)用在別的專案上,傳統(tǒng)的做法就是不斷的P色不斷輸出不斷上傳& 編寫(xiě)css跟html

隨著網(wǎng)頁(yè)技術(shù)不斷升華,關(guān)于icon也已經(jīng)有了相當(dāng)不錯(cuò)的解決方式那就是icon?font這種做法是非常方便的,只要一段樣式的標(biāo)簽就可以引入自己想要的icon,而且大小跟顏色是可以隨心所欲的修改, 筆者今天要分享的是我很常用的三個(gè)線上icon的網(wǎng)站,以下分享三個(gè)網(wǎng)站,以及個(gè)人使用上的經(jīng)驗(yàn)整理出優(yōu)點(diǎn)跟缺點(diǎn)

三個(gè)免費(fèi)的線上icon 讓網(wǎng)頁(yè)設(shè)計(jì)師更輕松

  • 1.fontawesome


    這是筆者最常用的線上icon,使用上相當(dāng)便利,使用方式~在您的head之間插入這段script?只需要在你的html標(biāo)簽上加上你選用的iconclass即可使用class="fas fa-cloud"

    優(yōu)點(diǎn)

    操作便利,而且大部分的線上icon是沒(méi)有l(wèi)ine的社群icon,這是我目前所知道的唯一一個(gè)

    缺點(diǎn)

    雖然號(hào)稱免費(fèi),但很多好看的icon基本上還是得升級(jí)付費(fèi),但基本的都是可以免費(fèi)使用

  • 2.Google Icons



  • 優(yōu)點(diǎn)

    也是操作便利,樣式也不少!

    缺點(diǎn)

    ie無(wú)法使用,不過(guò)現(xiàn)在Microsoft Edge最新版的核心也改成Chrome,所以未來(lái)只要ie慢慢沒(méi)落,這個(gè)應(yīng)該也不成問(wèn)題,(沒(méi)有l(wèi)ine的icon)

  • 3.fontello


    fontello?也是筆者蠻常用的一個(gè),因?yàn)閕con的樣式多,風(fēng)格也不錯(cuò),你在這個(gè)網(wǎng)站上面可以選擇你需要的icon,不需要的則不需要選擇, 這樣在引入的檔案中可以減輕不少負(fù)擔(dān)

    優(yōu)點(diǎn)

    樣式多風(fēng)格多,全站免費(fèi)

    缺點(diǎn)

    你必須將檔案下載下來(lái),將相關(guān)css引入到你的html里頭才可以使用,新作一個(gè)網(wǎng)站你就必須引入一次,程序上麻煩很多

  • 其實(shí)還有非常多的免費(fèi)線上icon可以使用,像是?Bootstrap等等, 不過(guò)如果要非常特別的icon,你還是得自己設(shè)計(jì)一下吧。

    希望以上的這些信息能對(duì)您有所幫助!



  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門(mén)
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時(shí)咨詢熱線

139-1050-5354