您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

css.gg – 一款免费开源CSS库实现700+图标应用前端项目

时间：08-06来源：作者：点击数：32

以前我们在开发前端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.svg

2、范例

<!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>