一款替代 iconfont 的图标库 CSS.GG

最新推荐文章于 2024-04-03 15:20:51 发布
最新推荐文章于 2024-04-03 15:20:51 发布
阅读量1.3k 收藏
点赞数
文章标签： css less 分布式存储 character 项目管理

转自公众号前端老王

嗨，我是 Martin，也叫老王，今天推荐一款好用的开源图标库。

我们平常找图标往往会去 iconfont

iconfont.cn

但是今天，我们看了 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

使用该包

该包，包含以下目录和文件:

PathWhat it is
/cssindividual *.css icons
/scssindividual *.scss icons
/svgindividual *.svg icons
/tsxindividual *.tsx icons styled-components
/all.cssall icons compressed in a single file
/all.d.tsstyled-components
/all.figlocal figma file same as https://css.gg/fig
/all.jslist of exported styled-components
/all.js.mapstyled-components
/all.jsonall icons *.css, *.svg, *.tsx including markup & public path
/all.scssall icons in a single SCSS file npm i node-sass needed
/all.svgSVG Sprite with all icons
/all.xdlocal adobe xd file same as https://css.gg/xd
/all.xmlall 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 @import

  • SVG

  • JSON - paths

  • XML - paths

  • React

  • Design Tools

    • Figma https://css.gg/fig

    • Adobe XD https://css.gg/xd

End

持续关注【悲伤日记】，给您带来精选好文~

悲伤日记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web-前端html+css从入门到精通 156. iconfont矢量图标库.zip
05-23
Web-前端html+css从入门到精通 156. iconfont矢量图标库.zip
除了阿里的iconfont图标库，还有这10个开源SVG图标库
前端全栈开发者
05-07 8272
在国内，我想大家基本上都是用阿里的iconfont图标库，这里介绍10个其他的开源图标库，下面列出的所有库都是完全开源的，因为我已经检查了许可条款和条件。 Font Awesome 我相信我们大多数人至少使用过一次Font Awesome图标，直到现在为止，因为它们是最早发布的高度流行的开源图标库之一。截至目前，他们的图库中总共有1,588个免费图标和7,842个专业图标。 Font Awes...
开源 Icon（图标） 大集合
最新发布
m0_66995023的博客
04-03 650
Remix Icon 是一套面向设计师和开发者的开源图标库，所有的图标均可免费用于个人项目和商业项目。与拼凑混搭的图标库不同，Remix Icon 的每一枚图标都是由设计师按照统一规范精心绘制的，在拥有完美像素对齐的基础上，确保每一枚图标风格一致且简洁易读。图标以 24x24 网格为基准，分为 “线性图标” 和 “面型图标” 两种风格，其图标风格为中性风格，适用于各种用户群体的项目。该系统图标库包含常用的图标，如用于媒体播放、通讯、内容编辑、连接等等，其图标在 Web 应用，安卓和 iOS 设计均适用。
使用iconfont.ttf图标文字库代替图标图片
热门推荐
Ralap Zhong的专栏
08-03 2万+
1 效果 2 下载字体库 1) 选中图标 —— 添加入库： 2) 添加至项目： 3) 下载项目中的图标字体库： 4）获取图标字体库iconfont.ttf 5）查看图标对应的unicode值 3 使用 1）把iconfont.ttf拷贝到项目assets目录中 2）修改TextView的字体库 3）xml中使用 4）装逼神器 1 效果 APP肯定都会用到图标，比如...
java后台icon font 图标替换
FireAny2010的专栏
12-15 731
我们知道后台有些菜单图标,一般用的是iconf font，往往免费的一套icon font系统里的图标太少，满足不了我们一些需求，当然也有人说用重复的图标不就可以了，可是作为一个资深程序员，强烈病态的强迫症，怎么可能允许这样的事情发生，不雅观，不完美，因此，本来就具体讲讲怎么自定义一个icon font 图标库. 1、首先打开下面链接，点击“selection”你会看到如下很多各种各样的图标 IcoMoon App - Icon Font, SVG, PDF & PNG Gene...
js使用icon-font，代替图片图标
Jone's Area
11-26 3629
在项目中我们经常需要用到一些图标 第一个想到的都会是去哪哪哪下个图片，说实在的，是真的不好，图片资源相对icon大多了，而且找图片很是头疼。 今天推荐阿里iconfont给大家！https://www.iconfont.cn/ 进入网页后搜索自己需要的icon，可以直接下载使用。 当然我今天推荐的肯定不是这种方式。 我们可以将icon当做css字体使用，如下 1、新建项目 2、添...
Iconfont 替代品网站 图标网站推荐
hollebug的博客
06-11 2484
最近iconfont网站突然不能访问想必很多同学都很苦恼，今天就给大家分享几个图标网站，解决大家的烦恼，推荐的图标库图标数量都比较多，并且风格统一！1.Tabler 风格统一的图标简介： 多达1978个图标的网站，免费和开源的图标，旨在使您的网站或应用程序具有吸引力、视觉一致且简单美观。Tabler Icons: over 1950 vector icons for web design1978 free and open source SVG icons designed with attention t
通过编写插件个性化你的IntelliJ IDEA
ouyb的专栏
07-21 8943
还记得2013年半夜观看Google I/O大会，一堆眼花缭乱的数字广告后，主持人提到这次I/O的主角是开发者，接下来给大家演示一系列开发工具和服务时，心想:可能无非就是一些向开发者开放的Google的API，这些对于一个从事Eclipse插件开发者来讲，确实遥远。果不其然，Maps API,Google Now API，悉数登场，接下来Google Play Games的游戏服务登场，其
Ant Design Pro V4.5 从服务器请求菜单图标不显示解决
シ❤゛甜虾的个人博客
08-04 1089
如果发现只有菜单，没有图标，只需要在models下的menu.ts中天下如下内容 import allIcons from '@@/plugin-antd-icon/icons'; import React from 'react'; const toHump = (name: string) => name.replace(/-(\w)/g, (all: string, letter: any) => letter.toUpperCase()); const formatter =
css.gg - 一套漂亮的纯 CSS 实现的免费开源图标库
那些免费的砖
01-19 738
700多个时尚漂亮的 css 图标库，特别适合 UI 设计师和前端开发者下载使用。 700+ CSS 图标 css.gg 是一套纯 css 实现的轻量美观的开源图标库，特点是所有的图形都通过 css 语法实现，是技术和设计的完美结合。 图标特色 风格中性，时尚统一，应用场景很广； 一共700多个图标，能满足一般的项目需求； 支持 xd / svg / css 等多种格式下载，不仅能用于设计二次修改，对前端开发的支持尤为优秀； 使用体验 图标在工作中应用非常广泛，漂亮的图标不仅在互联网产品中随处可见，.
css.gg:SVG Sprite 中可用的开源 CSS、SVG 和 Figma UI 图标-开源
08-07
700 个精确和详细的 UI 图标，提供组织良好的 Figma 组件库。 所有图标都可用作资产的组件，您可以从中搜索单个图标或浏览类别。 所有图标都可以作为组件使用。 默认情况下，所有 CSS、SCSS 图标都通过使用 currentColor 属性从父级继承颜色，您可以如何应用任何您喜欢的颜色。 您需要定义宽度和高度才能使其工作。 之后你可以创建一个div。 默认情况下，所有颜色都使用 currentColor 作为值，以便从父级继承颜色。 在 React 项目中，您可以包含单个图标作为 CSS、样式化组件、SCSS、SVG 或使用 .json 或 .xml 文件调用内容。 如果您根本不想下载而只是复制粘贴，请访问图标页面，您有一个特殊的标签。
iconfont.css免费给大家了
03-25
一些文字代码
5款CSS3图标鼠标悬停效果.zip
07-11
5款CSS3图标鼠标悬停效果，鼠标悬停在图片上查看效果。兼容主流浏览器。 使用方法： 1、head区域引用文件 lrtk.css 2、在文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码 3、复制images...
12款css3加载图标动画特效.zip
10-14
非常实用好看的特效代码，可以完美运行，可以二次修改！
强大而灵活的字体图标替代库iconfont
weixin_33700350的博客
03-25 456
前言概述 在开发网页制作过程中通常需要一些网页小图标，前端需要PS切图，将单个小图标icon组合成CSS雪碧图过程中，需要一些时间和精力; 如果网页制作中需要的小图标icon有一套css框架库集成起来将大大提高开发效率于是就有了接下来要说的字体图标库fontAwesome、iconfont fontAwesome 图标字体库与CSS框架 fontAwesome 官网htt...
php加入两套iconfontcss图标,iconfont矢量图替换方法-css高级应用
weixin_33504929的博客
03-29 220
矢量图标替换教程搜索你分类的关键字---然后加入购物车加入购物车之后，下载到本地用浏览器打开demo.html把aclass=“原来样式”替换成iconfont要把下载到本地的demo里面的这四个文件传到对应的模板文件夹下。然后对应文件夹下的style.css打开找到/*字体图标区域*/@font-face{font-family:fp-font;src:url(http://at....
[超详细]微信小程序使用iconfont教程及解决真机无法显示问题
zhazhashuai1999的博客
08-19 4168
在iconfont官网创建自己的项目 选择自己需要的图标加入'购物车',然后在'购物车'页面点击添加至项目,没有项目的话点击新建项目.
iconfont图标库
06-10
Iconfont图标库是一个由阿里巴巴矢量图标库提供的图标字体库，通过使用Iconfont图标库，可以方便地在Web页面、移动端应用、小程序等各种场景中使用矢量图标。 在使用Iconfont图标库时，需要进行以下步骤： 1. 注册...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值