豚仔测评以前我们在开发前端WEB端的时候，如果需要用到小图标是不是需要让美工设计小图标然后调用。这样不仅仅效率低下，而且会影响到我们前端的速度和管理效率。于是如今我们在使用前端小图标的时候都会引用第三方JS、图标库，在这篇文章中我们要介绍的是CSS.GG纯CSS代码库可以实现700+的图标调用。
CSS.GG 支持CSS、SVG等格式调用的图标，700+图标数调用基本上满足我们大部分的项目需要的小图标。
我们看看在各个应用中如何调用图标。
第一、HTML调用
1、所有图标
<!-- 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、单个图标
<!-- 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、举个例子
<!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 @import
1、所有图标
/* 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、单个图标
/* 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下载路径
我们不能直接引用，需要下载到本地。
<!-- css.gg -->
https://css.gg/svg
<!-- UNPKG -->
https://unpkg.com/css.gg/icons/all.svg
<!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/all.svg2、范例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- First copy all.svg to your project directory -->
<svg><use xlink:href="path/to/all.svg# {ICONNAME} "/></svg>
</body>
</html>以上是部分CSS.GG的应用，如果我们需要用到前端业务中，可以根据需要选择。
项目具体可以参考：https://github.com/astrit/css.gg
评论前必须登录！
注册