烈火下载以前我们在开发前端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
评论前必须登录！
注册