嗨，我是 Martin，也叫老王，今天推荐一款好用的开源图标库。

我们平常找图标往往会去 iconfont

但是今天，我们看了 Martin 的文章之后，就会有一个新的选择——CSS.GG

Github

https://github.com/astrit/css.gg

  • star 5751
  • fork 214
  • Watch 86
  • 项目介绍

700 + 纯 CSS, SVG & Figma UI Icons 可用在 SVG 精灵图, styled-components, NPM & API

使用方法

通过 npm or yarn 安装最新版本

npm i css.gg


yarn add css.gg

使用该包

该包，包含以下目录和文件:

Path What it is
/css individual *.css icons
/scss individual *.scss icons
/svg individual *.svg icons
/tsx individual *.tsx icons styled-components
/all.css all icons compressed in a single file
/all.d.ts styled-components
/all.fig local figma file same as https://css.gg/fig
/all.js list of exported styled-components
/all.js.map styled-components
/all.json all icons *.css, *.svg, *.tsx including markup & public path
/all.scss all icons in a single SCSS file npm i node-sass needed
/all.svg SVG Sprite with all icons
/all.xd local adobe xd file same as https://css.gg/xd
/all.xml all icons *.css, *.svg, *.tsx including markup & public path

HTML 导入

1. All icons

<!-- css.gg -->

<link href='https://css.gg/css' rel='stylesheet'>

<!-- UNPKG -->

<link href='https://unpkg.com/css.gg/icons/all.css' rel='stylesheet'>

<!-- JSDelivr -->

<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'>

2. Single icon

<!-- css.gg -->

<link href='https://css.gg/ {ICONNAME} .css' rel='stylesheet'>

<!-- UNPKG -->

<link href='https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'>

<!-- JSDelivr -->

<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'>

3. Collection

<!-- CSS Format -->

<link href='https://css.gg/css?= {ICONNAME} | {ICONNAME}' rel='stylesheet'>

4. Markup

<i class=" {ICONNAME} "></i>

<!-- reference icon using span -->

<span class=" {ICONNAME} "></span>

<!-- reference icon using div -->

<div class=" {ICONNAME} "></div>

<!-- reference icon using custom tag -->

<gg-icon class=" {ICONNAME} "></gg-icon>
5. Example
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- You can add this link or any other CDN alternatives as mentioned above -->

    <link href='https://css.gg/css' rel='stylesheet'>

</head>

<body>

    <!-- Using i tag  -->

    <i class="gg- {ICONNAME} "></i>

    <!-- Using div tag  -->

    <div class="gg- {ICONNAME} "></div>

    <!-- Using custom tag  -->

    <gg-icon class="gg- {ICONNAME} "></gg-icon>

</body>

</html>

其他方式

关注我们

今天的分享就到这里，点赞、收藏、留言，三连。

记得关注我们哟，送你一份前端大礼包。

又一款开源图标库 CSS.GG，值得一用的更多相关文章

  1. 曲线控件我一直用codeproject上的那几个(C++ 100款开源界面库)

    Alberl#23楼[楼主] 2013-11-04 11:47 Alberl @baita00引用看了大神的教程,真的不错,学习了很多东西,^_^.这节教程里,大神好像在找曲线控件,是吗?大神有什特殊 ...

  2. (转)12款开源JavaScript库

    JavaScipt几乎是所有前端开发人员必会的编程语言,并且,随着各种移动APP的串红,JavaScript还可以用来开发移动应用.除此以外,为了丰富前端/移动开发,有不少开发者推出了各种基于Java ...

  3. C++ 100款开源界面库 (10)

    (声明:Alberl以后说到开源库,一般都是指著名的.或者不著名但维护至少3年以上的.那些把代码一扔就没下文的,Alberl不称之为开源库,只称为开源代码.这里并不是贬低,像Alberl前面那个系列的 ...

  4. 仿迅雷播放器教程 -- C++ 100款开源界面库 (10)

      (声明:Alberl以后说到开源库,一般都是指著名的.或者不著名但维护至少3年以上的.那些把代码一扔就没下文的,Alberl不称之为开源库,只称为开源代码.这里并不是贬低,像Alberl前面那个系 ...

  5. C++100款开源界面库[转]

    (声明:Alberl以后说到开源库,一般都是指著名的.或者不著名但维护至少3年以上的.那些把代码一扔就没下文的,Alberl不称之为开源库,只称为开源代码.这里并不是贬低,像Alberl前面那个系列的 ...

  6. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  7. 1. Android 系统上一款开源的图表库

    1. MPAndroidChart  MPAndroidChart 是 Android 系统上一款开源的图表库.目前提供线图和饼图,支持选择.缩放和拖放. 一个可以拖动缩放的图表库,包含曲线图.直方图 ...

  8. 一步步打造自己的纯CSS单标签图标库

    图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Ht ...

  9. 手把手教你打造一个纯CSS图标库

    来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. ...

随机推荐

  1. java中eclipse控制台接受输入的方法

    如果是超大字符串的话,相比较来说用io流比较快捷 import java.io.BufferedReader; import java.io.IOException; import java.io.I ...

  2. java实现洛谷P3376【模板】网络最大流

    题目描述 如题,给出一个网络图,以及其源点和汇点,求出其网络最大流. 输入格式 第一行包含四个正整数N.M.S.T,分别表示点的个数.有向边的个数.源点序号.汇点序号. 接下来M行每行包含三个正整数u ...

  3. Linux目录结构与功能

    在Linux中,一切皆文件.所以,Linux和Windows目录有很大的不同,它没有明确的盘符,它的目录就像一棵大树一样,顶层目录就是根目录:/ ,然后下面又有很多个分支,分支可以再分,从而形成一个庞 ...

  4. python3 修改计算机名称GUI程序

    from tkinter import *from tkinter import messageboximport tkinterimport winregimport osdef serch(): ...

  5. 解析HOT原理

    2020-06-09 19:31:01 一.疑问 前段时间:QQ群里有人对“这个表(0,4)这行数据我做了update操作,查看索引的page数据,看到索引一直指向(0,4),用ctid='(0,4) ...

  6. 实现saas多租户方案比较

    看到一篇比较多租户数据隔离方案的文章,总结挺不错.其实大部分内容在我前几年写的文章都有. 文章翻译自: https://blog.arkency.com/comparison-of-approache ...

  7. [computer graphics]世界坐标系->相机坐标系详细推导

    基变换 理论部分 在n维的线性空间中,任意n个线性无关的向量都可以作为线性空间的基,即空间基不唯一.对于不同的基,同一个向量的坐标一般是不同的.因为在计算机图形学中,主要研究三维的空间,所以可以简化问 ...

  8. Nice Jquery Validator 方法

    .validator() .validator( options ) 描述:根据参数初始化验证,验证 jQuery 选中的表单 参数:{Object} options - 可选,参考配置选项 示例: ...

  9. 手写网页扫雷之HTML部分

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 说说硬件中核心板的作用和优缺点，基于i.MX8M Mini核心处理器平台

    核心板,顾名思义,即硬件构成中关键的器件和电路打包封装的一块电子主板,具有布线复杂.多层.高频信号干扰.器件密度高等特性,大多数核心板集成了处理器.内存.存储器.电源管理和引脚,通过引脚与配套基板连接 ...