整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
00多个时尚漂亮的 css 图标库，特别适合 UI 设计师和前端开发者下载使用。
css.gg 是一套纯 css 实现的轻量美观的开源图标库，特点是所有的图形都通过 css 语法实现，是技术和设计的完美结合。
css.gg 网站首页
图标在工作中应用非常广泛，漂亮的图标不仅在互联网产品中随处可见，在 PPT 、数据图表和海报设计等各种可视化信息载体中也经常出现。
css.gg 图标预览
和大多数图标库的原始图形格式不一样，css.gg 是一个代码实现的图标库，无论是导出的 svg、xd 格式、直接导入 figma，还是前端开发的引用，都为设计和开发带来了便利。因此很适合用于互联网项目。特别是在一些较轻的 web 项目上，不需要再引入字体文件或 svg 图形的方式加载图标，只需要拷贝相应的图标代码，不仅在前端开发中很方便地调整颜色，而且能用 css 代码局部调整颜色，从而让图标变成彩色。
需要注意的是，图标使用了不少 css3 规范的渲染，需要考虑浏览器的兼容，如果不是运行移动端或现代浏览器上的项目，可能会有兼容性的问题。
css.gg 基于 MIT 开源协议在 github 上开源，任何个人和商业机构都可以免费下载使用。
关注我，持续分享高质量的免费开源、免费商用的资源。
↓↓点【了解更多】查看本次分享的网址。
可以看作一种特殊字体，其展示的是图标，而不再是文字，其拥有字体的特性，比如大小、颜色、透明效果、阴影等，字体图标加载快、不变形。也可以看作是矢量格式的图标。
（1）iconmoon字体图标库：https://icomoon.io/app
（2）阿里iconfont字体图标库：https://www.iconfont.cn/
（3）font-awesome字体图标库：
以iconmoon为例
（1）选择需要的图标并下载
1）在fonts文件夹下有四种类型的字体文件，每种字体文件兼容浏览器的种类不同
a）.tff格式（TrueTypeFont），美国苹果公司和微软公司共同开发的，在Windows和Mac操作系统中为默认字体；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等浏览器支持该字体。
b）.woff格式（Web Open Font Format-Web开放字体格式），是一种网页所采用的字体格式标准，使用zlib压缩，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等浏览器支持该字体。
c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微软设计用来在网页使用的字体格式，是OpenType字体的压缩格式，IE专用，IE4+支持该字体。
d）.svg格式（Scalable Vector Graphics-可缩放的矢量图形），它是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等浏览器支持该字体。
其他字体
e）.otf格式（Open Type Font），Microsoft和Adobe公司开发的，.otf格式比.ttf更为强大，可以把PostScript字体嵌入到TrueType中。
2）字体转换
https://www.fontke.com/tool/convfont/
（2）字体图标的引入
1）把字体放到项目的相应位置
将下载解压后的fonts文件夹放到项目路径下
2）在html页面中引入字体
利用CSS的@font-face属性，引入外部字体；
在style.css文件中有如下代码，为固定用法，注意url中字体路径，其它可以不变。
在html的style标签中引入如下代码：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?8l3wc0');
src: url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
url('fonts/icomoon.woff?8l3wc0') format('woff'),
url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}3）为元素用该字体
span {
font-family: "icomoon";
}4）为元素添加内容
复制demo.html中需要的图标，如下，将其作为元素的内容。
<span></span> （3）新增字体图标的引入
当利用iconmoon选用字体图标时，如果有新增的字体图标需要加入，则需要用到.json文件，如下，在原先选择的基础上，再选择新选择的字体图标，然后再下载使用。
titanic是在Github上开源的一组免费的动画图标，可以将其简单的运用到网页中，而且代码及其简单，但是动画效果却很不错，动画图标和静态图标的不同之处在于它可以让你的网页更加富有活力，让产品更加具备视觉吸引力，一起来看看！
https://github.com/icons8/titanic
安装使用及其简单，可以通过CDN或npm安装它：
npm install titanic-icons --save
将代码引入你网页的head中后：
<script src="/dist/js/titanic.min.js"></script> <script src="/bodymovin/4.5.9/bodymovin.min.js"></script>
在body中初始化：
<script> var titanic = new Titanic(); </script>
这样，你就可以在HTML中使用任意位置以下标签添加图标：
<div class='titanic titanic-chat'></div>
chat可以是以下任一一种：
1、titanic.isInitialized（）
判断是否初始化成功
2、titanic.items
获取titanic集合
3、titanic.items[index].on(), titanic.items[index].off(), titanic.items[index].play()
按索引播放titanic的动画
4、titanic.on(token), titanic.off(token), titanic.play(token)
通过名称播放泰坦尼克号物品的动画
5、以下是一个完成的示例：
<head>
<!--Inserting the scripts once for the whole page-->
<script src="/dist/js/titanic.min.js"></script>
<script src="/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
</head>
<body>
<!--Inserting an icon-->
<div class='titanic titanic-checkbox'></div>
<!--Initializing-->
<script>
var titanic = new Titanic({
hover: true, // auto animated on hover (default true)
click: true // auto animated on click/tap (default false)
});
</script>
<!--Clicking turns this icon on-->
<button onclick="titanic.on(getElementById('checkbox').value)">On</button>
</body>
通过截图大致了解，可以直接访问官方网站查看动画效果：
每个人都喜欢个性鲜明的页面。通过200个动画图标包，使Web和移动用户界面更具视觉吸引力。
titanic是一组丰富的动画图标，可以让你的网页极具视觉吸引力，是设计师和前端工程师的不二之选，感兴趣的可以尝试！
PS:你可以直接从官网或者Github获取，当然也可以私信本头条号关键字：“icons”，Enjoy it!
*请认真填写需求信息，我们会在24小时内与您取得联系。
