嗨，我是 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实现 蓝桥杯 算法提高 和谐宿舍2

    试题 算法提高 和谐宿舍2 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 我的某室友学过素描,墙上有n张他的作品.这些作品都是宽度为1,高度不定的矩形,从左到右排成一排,且底边在同 ...

  2. Java实现 蓝桥杯 历届试题 国王的烦恼

    问题描述 C国由n个小岛组成,为了方便小岛之间联络,C国在小岛间建立了m座大桥,每座大桥连接两座小岛.两个小岛间可能存在多座桥连接.然而,由于海水冲刷,有一些大桥面临着不能使用的危险. 如果两个小岛间 ...

  3. 温故知新-多线程-深入刨析volatile关键词

    文章目录 摘要 volatile的作用 volatile如何解决线程可见? CPU Cache CPU Cache & 主内存 缓存一致性协议 volatile如何解决指令重排序? volat ...

  4. 动作函数-web_custom_request

    web_custom_request("get_login", "URL=http://10.1.102.75:8000/login?user=Milton&pw ...

  5. 拒绝降权！教你用 Python 确保制作的短视频独一无二

    1. 场景 前段时间有人私信我,说自己辛辛苦苦剪辑的短视频,上传到某平台后,由于播放量太大,收到 降权 的通知,直接导致这个账号废掉了! 其实,各大视频平台都有自己的一套鉴别算法,针对视频的二次创作, ...

  6. 一行代码让你的python运行速度提高100倍

    转自:https://www.cnblogs.com/xihuineng/p/10630116.html 加上之后运行速度快了十倍,我的天呐. python一直被病垢运行速度太慢,但是实际上pytho ...

  7. java中int和Integer的区别？为什么有了int还要有设计Integer？

    参考https://blog.csdn.net/chenliguan/article/details/53888018 https://blog.csdn.net/myme95/article/det ...

  8. [置顶] linux中fork（）函数详解（原创！！实例讲解）

    分类: 计算机系统 linux2010-06-01 23:35 60721人阅读 评论(105) 收藏 举报 linux2010存储  一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源 ...

  9. Mybatis框架介绍

    MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis.201 ...

  10. 性能测试之JVM的故障分析工具VisualVM

    VisualVM 是随JDK一同发布的jvm诊断工具,通过插件可以扩展很多功能,插件扩展也是其精华所在. 提供了一个可视界面,用于在Java应用程序在Java虚拟机上运行时查看有关Java应用程序的详 ...