css.gg – 一款免費(fèi)開源CSS庫(kù)實(shí)現(xiàn)700+圖標(biāo)應(yīng)用前端項(xiàng)目

shadowbook 發(fā)布于2021-09-23 11:57 / 2877人閱讀

摘要：支持等格式調(diào)用的圖標(biāo)，圖標(biāo)數(shù)調(diào)用基本上滿足我們大部分的項(xiàng)目需要的小圖標(biāo)。范例以上是部分的應(yīng)用，如果我們需要用到前端業(yè)務(wù)中，可以根據(jù)需要選擇

以前我們?cè)陂_發(fā)前端WEB端的時(shí)候，如果需要用到小圖標(biāo)是不是需要讓美工設(shè)計(jì)小圖標(biāo)然后調(diào)用。這樣不僅僅效率低下，而且會(huì)影響到我們前端的速度和管理效率。于是如今我們?cè)谑褂们岸诵D標(biāo)的時(shí)候都會(huì)引用第三方JS、圖標(biāo)庫(kù)，在這篇文章中老蔣要介紹的是CSS.GG純CSS代碼庫(kù)可以實(shí)現(xiàn)700+的圖標(biāo)調(diào)用。

CSS.GG 支持CSS、SVG等格式調(diào)用的圖標(biāo)，700+圖標(biāo)數(shù)調(diào)用基本上滿足我們大部分的項(xiàng)目需要的小圖標(biāo)。

我們看看在各個(gè)應(yīng)用中如何調(diào)用圖標(biāo)。

第一、HTML調(diào)用

1、所有圖標(biāo)

2、單個(gè)圖標(biāo)

3、舉個(gè)例子

第二、CSS @import

1、所有圖標(biāo)

/* css.gg */@import url("https://css.gg/css");/* UNPKG */@import url("https://unpkg.com/css.gg/icons/all.css");/* JSDelivr */@import url("https://cdn.jsdelivr.net/npm/css.gg/icons/all.css");

2、單個(gè)圖標(biāo)

/* css.gg */@import url("https://css.gg/ {ICONNAME} .css");/* UNPKG */@import url("https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css");/* JSDelivr */@import url("https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css");

第三、SVG

1、SVG下載路徑

我們不能直接引用，需要下載到本地。

https://css.gg/svghttps://unpkg.com/css.gg/icons/all.svghttps://cdn.jsdelivr.net/npm/css.gg/icons/all.svg

2、范例

以上是部分CSS.GG的應(yīng)用，如果我們需要用到前端業(yè)務(wù)中，可以根據(jù)需要選擇.

云服務(wù)器 GPU云服務(wù)器 CSS.GG圖標(biāo)庫(kù) CSS圖標(biāo)庫(kù) 免費(fèi)圖標(biāo)庫(kù) 圖標(biāo)庫(kù)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/120869.html

相關(guān)文章

15個(gè)有趣的JavaScript與CSS庫(kù)

摘要：而調(diào)試器具有對(duì)模型控制器以及視圖的實(shí)時(shí)管理權(quán)限。項(xiàng)目地址是一個(gè)輕量級(jí)純寫的文本工具提示庫(kù)。它支持種不同國(guó)家的貨幣格式，以及超過(guò)種不同語(yǔ)言的本地化設(shè)置。項(xiàng)目地址是一個(gè)根據(jù)規(guī)范構(gòu)建的輕量級(jí)框架。它壓縮后僅有，同時(shí)它沒(méi)有預(yù)先設(shè)定的元素和內(nèi)置動(dòng)畫。在十一月份的前端技術(shù)列表中，我們整合了一些令人感到驚嘆的 GitHub 項(xiàng)目，其中包含了新的 CSS 框架、node.js包管理器，以及用于實(shí)現(xiàn)圖...

chemzqm 2019-08-30 13:15 評(píng)論0 收藏0
15個(gè)有趣的JavaScript與CSS庫(kù)

摘要：而調(diào)試器具有對(duì)模型控制器以及視圖的實(shí)時(shí)管理權(quán)限。項(xiàng)目地址是一個(gè)輕量級(jí)純寫的文本工具提示庫(kù)。它支持種不同國(guó)家的貨幣格式，以及超過(guò)種不同語(yǔ)言的本地化設(shè)置。項(xiàng)目地址是一個(gè)根據(jù)規(guī)范構(gòu)建的輕量級(jí)框架。它壓縮后僅有，同時(shí)它沒(méi)有預(yù)先設(shè)定的元素和內(nèi)置動(dòng)畫。在十一月份的前端技術(shù)列表中，我們整合了一些令人感到驚嘆的 GitHub 項(xiàng)目，其中包含了新的 CSS 框架、node.js包管理器，以及用于實(shí)現(xiàn)圖...

wangjuntytl 2019-08-22 11:02 評(píng)論0 收藏0
前端學(xué)習(xí)資源

摘要：掘金日?qǐng)?bào)第四期使用怎么能不知道這些插件合集掘金日?qǐng)?bào)主打分享優(yōu)質(zhì)深度技術(shù)內(nèi)容，技術(shù)內(nèi)容分前端后端產(chǎn)品設(shè)計(jì)工具資源和一些有趣的東西。目前已經(jīng)涵蓋了的相關(guān)資源鏈接，供大家參考與學(xué)習(xí)。【掘金日?qǐng)?bào)】第四期使用Sublime？怎么能不知道這些 Sublime 插件合集！掘金日?qǐng)?bào)主打分享優(yōu)質(zhì)深度技術(shù)內(nèi)容，技術(shù)內(nèi)容分：前端、后端、Android、iOS、產(chǎn)品設(shè)計(jì)、工具資源和一些有趣的東西。前端...

xzavier 2019-08-30 13:57 評(píng)論0 收藏0
前端學(xué)習(xí)資源

摘要：掘金日?qǐng)?bào)第四期使用怎么能不知道這些插件合集掘金日?qǐng)?bào)主打分享優(yōu)質(zhì)深度技術(shù)內(nèi)容，技術(shù)內(nèi)容分前端后端產(chǎn)品設(shè)計(jì)工具資源和一些有趣的東西。目前已經(jīng)涵蓋了的相關(guān)資源鏈接，供大家參考與學(xué)習(xí)。【掘金日?qǐng)?bào)】第四期使用Sublime？怎么能不知道這些 Sublime 插件合集！掘金日?qǐng)?bào)主打分享優(yōu)質(zhì)深度技術(shù)內(nèi)容，技術(shù)內(nèi)容分：前端、后端、Android、iOS、產(chǎn)品設(shè)計(jì)、工具資源和一些有趣的東西。前端...

weij 2019-08-26 11:43 評(píng)論0 收藏0
庫(kù)&插件&框架&工具

摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯(cuò)誤 2016 年最好用的表單驗(yàn)證庫(kù) SMValidator.js 前端表單驗(yàn)證工具分享淺談前端線上部署與運(yùn)維說(shuō)到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對(duì)接、一起完...

Codeing_ls 2019-08-01 18:22 評(píng)論0 收藏0