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

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

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

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

以上是部分CSS.GG的应用，如果我们需要用到前端业务中，可以根据需要选择。

项目具体可以参考：https://github.com/astrit/css.gg

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:HTML中a标签的target属性的取值和作用--详解(附加代码) 下一篇:实现页面不被复制

高考生入学注意：这些大	【健康】纯净水、天然
14种竞赛生升学路径盘	excel后缀xls和xlsx有