• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 国人开发的一套免费开源图标库 草莓图标库

国人开发的一套免费开源图标库 草莓图标库

作者:智欣约的博客 字体:[增加 减小] 来源:互联网 时间:2017-08-14

本文主要包含icon图标库,草莓图标图标库等相关知识,智欣约的博客希望在学习及工作中可以帮助到您

在网页制作中,我们需要插入一些修饰性质的小图标来增加页面的显示效果。以前比较流行图片icon图标,但随着设备多样化、分辨率不同,矢量图标成为一个较为完美的解决方案。目前国内网页开发中使用较多的矢量图标库为Fontawesome,但由于是国外的作品,我们用起来似乎不是那么方便。今天给大家推荐一套免费开源图标库,国人开发更加符合国内的使用习惯。

国人开发的一套免费开源图标库 草莓图标库

草莓图标库是一个为开发者设计的一套免费开源图标库。

以下描述来自开发者自述:

这套图标是我和设计朋友用 Illustrator 和 Sketch 将每个图标设置成 16X16 的像素方格大小精心绘制。

所有线条都尽量保持了 1 像素,风格统一,为了兼顾商业大众项目,在识别度方面,通用性和个性差异化上做一个均衡。我们会定期新增和优化草莓图标库。力求矢量图的像素级别的完美显示。

有些设计我自己也习惯去用阿里 iconfont 平台的图标,类别比较丰富,但是也存在许多其他问题:设计师风格不同,图标线条粗细不一致,关键一点图标商业版权风险。

草莓图标的最初版本,也是为了我们自己的项目设计使用,随着图标越来越多,现在使用 SIL OFL(SIL 开源字体授权) 协议免费开源分享给有需要的开发者朋友,也同样希望给大家提供多一个选择!

也很感谢流浪小猫和一些技术小伙伴。

可以看得出,草莓图标库在整体风格上非常接近Fontawesome,但草莓图标在分类上做的非常用心,诸如“开发图标”“基础图标”“国外品牌”这些细致的分类,让我们可以非常方便的挑选到合适的图标。笔者特别喜欢的就是其中“线形图标”这一分类,简约的风格在当前还是比较流行的。

国人开发的一套免费开源图标库 草莓图标库

草莓图标库使用方法:

  1. 下载草莓图标库文件,将整个文件放入到你的项目中。
  2. 在 <head> 标签中添加 <link rel=”stylesheet” href=”项目路径/caomei.css”>
  3. 在需要图标的地方添加对应 class 的 <span> 即可,例如实心图标,<span class=”czs-heart”></span>

在fontawesome中,使用的是<i>标签,其实并没有太大区别...

草莓图标库官网-->草莓图标    http://chuangzaoshi.com/icon/

 

 

您可能想查找下面的文章:

  • 国人开发的一套免费开源图标库 草莓图标库

相关文章

  • 2017-08-05html的table用法(让网页的视觉效果显示出来)
  • 2017-08-05提高页面代码修改效率 掌握HTML语言的核心知识
  • 2017-08-05Xhtml下不常用却很有用的标签
  • 2017-08-05html中常用的标签总结(必看)
  • 2017-08-05XHTML标签的嵌套规则分析
  • 2017-08-05百度输入法开放API 宣称可随意移植使用
  • 2017-08-05input标签里面的name与value的区别
  • 2017-08-05多个div中table的tdwidth设置一样也不法对齐
  • 2017-09-04HTML标签语义化,让网页更好地被搜索引擎理解
  • 2017-08-05html页面中常用的一些小方法整理

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 揭开HTML 5工作草稿的神秘面纱
    • Marquee标记在XHTML代码中该如何用
    • HTML标签语义化的介绍
    • 详解a href=#与 a href=javascript:void(0) 的区别
    • HTML表单标记教程(4):
    • 空格 在ie、firefox、chrome浏览器中显示距离不一致
    • HTML 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法
    • 10个未被充分利用或被误解的HTML标签
    • 多语言网站(如何实现网站的多语言版本?)
    • htm和html有什么区别 HTM和HTML的区别是什么

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有