CSS3中常用字体图标库总结
[一勺烩]CSS3中常用字体图标库总结 - 靳洪飞的文章 - 知乎https://zhuanlan.zhihu.com/p/21910270
字体图标
以前网页上显示图标都是用切成小图片，然后根据不同场景作多个小图，通过JS来控制显示效果。 字图图标，顾名思义，就像使用通常的字体，可以设置字体颜色，大小等，不用在搞多张小图片，非常灵活。
优点
- 轻松的定义图标的颜色，大小，阴影，和任何与CSS相关的特性。
- 更快的载入速度、样式更容易定义。
- 使用矢量字体，这意味着他们可以完美的显示在高分辨率显示器中。
图标制作说明
- 阿里巴巴UX部门图标制作说明: http://www.iconfont.cn/help/iconmake.html
- 制作图标字体字库
图标在H5中使用方法
使用方法在这里就不记述了，参照下面各字体图标的example说明
Webfont矢量图标库站点总结
阿里巴巴矢量图标
- 官网: http://www.iconfont.cn/
- 说明: 阿里巴巴UX部门推出的矢量图标管理网站涵盖了1000多个常用图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时http://iconfont.cn平台作为矢量图标倡导者，积极在线分享矢量图标制作经验、前端应用说明，及应用中常见的一些问题。
- 推荐理由: 涵盖了有1000多个常用图标，持续更新。咱国人，支持是必须的。
Font Awesome
- 官网: http://fontawesome.io
- Github: https://github.com/FortAwesome/Font-Awesome/
- 说明: Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
- 推荐理由: 更新快，图标多，覆盖了很多分类，今天为止大约有634多个（2016/08/07）。
Glyph Icons
- 官网: http://glyphicons.com/
- Bootstrap: http://getbootstrap.com/components/
- 说明: Glyphicons Halflings需要商业许可，但是可以通过基于项目的Bootstrap来免费使用这些图标，Bootstrap捆绑了200多个字体图标。
Simple Line Icons
- 官网: https://thesabbir.github.io/simple-line-icons/
- Github: https://github.com/thesabbir/simple-line-icons
- 说明: 一套线条非常优美的图标，今天为止大约有186多个（2016/08/07）。
Ionicons
- 官网: http://ionicons.com/
- Github: https://github.com/driftyco/ionicons
- 说明: 一套线条非常优美的图标，今天为止大约有750多个字体图标（2016/08/07）。
- 推荐理由: 图标多，有标准，iOS，Android，社交图标，图标非常精美。
Themify
- 官网: http://themify.me/themify-icons
- 说明: Themify图标是用于网页设计和应用一套完整的图标，包括320以上像素完美，手工制作的图标，画的灵感来自苹果iOS7公开，100%免费！
Material Design Iconic Font
- 官网: http://zavoloklom.github.io/material-design-iconic-font/index.html
- Github: https://github.com/zavoloklom/material-design-iconic-font
- 说明: 有提醒，视频，联系，内容，编辑器，硬件，地图等多种分类图标，今天为止大约有700多个字体图标（2016/08/07）。
Weather Icons
- 官网: http://erikflowers.github.io/weather-icons/
- 说明: 涵盖了与天气相关字体图标，今天为止大约有222多个（2016/08/07）。
CSS3中常用字体图标库总结相关推荐
- 在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库 以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ...
- 云炬Android开发笔记 3-2字体图标库集成与封装
1.项目:android-iconify点此链接到Github 这是一个字体图标库,用字体来代替很多图片. Android开发经常将很多本地图标放在drawable和mipmap文件夹下,这样有一些坏 ...
- css3 - 字体图标库使用方法
一些字体图标库的网站 https://icomoon.io/app/#/select http://www.iconfont.cn/ http://www.bootcss.com/ http://ww ...
- 在Uni-App中使用阿里字体图标库
在使用Uni-App框架开发微信小程序时,需要用到阿里字体图标库,本来是在public/index.html中通过link引入了图标的在线地址,通过npm run serve运行到浏览器上可以正常显示 ...
- 在微信小程序中使用字体图标
方法一:转化为base64 第一步:在阿里巴巴矢量图标库下载需要的图标 QQ截图20180316191514.png 点击下载代码,将下载后的download.zip解压 第二步:进入https:// ...
- 【web组件库系列】封装自己的字体图标库
封装自己的web字体图标库 CSDN:jcLee95 邮箱 :291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/article/deta ...
- Android肝帝战纪之字体图标库(iconify)的简单使用
字体图标库(iconify)的简单使用 本文介绍字体图标库简单的封装和使用(以集成Fontawesome为例): Iconify的GIithub链接 点此链接到Github 导入依赖 //在app级别 ...
- 字体图标库（Font Awesome）的使用--绝佳的图标字体库和CSS框架
一.概述 web项目(前台/后台)开发中,很多地方需要使用图标样式(如:删除图标或短信图标,见下图),当然可以选择图片当背景或者用<img>标签,但是用图片的不灵活性也是显然易见的,如颜色 ...
- 如何使用阿里巴巴字体图标库
1. 阿里巴巴字体图标库官网:http://www.iconfont.cn/ 2.选择自己要用的字体图标,下载到本地. 3.在页面中引用 iconfont.css 这个样式 4.<i class ...
- 使用多个icon 字体图标库样式冲突问题
场景:项目中使用的UI样式库中包含一套icon 字体图标库,自定义一套字体图标库,在应用的时候,出现冲突,导致一方字体图标库无法显示或者显示不正常,原因:字体命名冲突,样式命名冲突,导致字体图标显示不 ...
最新文章
- h1.1 hadoop简介
- java swing 图片切换_使用Javaswing自定义图片作为按钮（原创）
- pgsql 前10条_白沙湾南片区11条新建道路最新进度及建成时间，已建成一条！还有一条将通车...
- 解决导入的maven聚合工程中子模块项目不显示
- Fiori应用全屏功能的实现 - fullscreen
- avalon2学习教程15指令总结
- LeetCode MySQL 1097. 游戏玩法分析 V
- Android之Service
- 开发中IDEA常用快捷键
- C语言动态规划——背包问题详解
- MVC+easyui-datagrid之查看详情
- 计算机考试系统注册组件失败,银行从业在线支付,IE浏览器安装控件不成功怎么办...
- assert.equal()
- Linux v4l2 一 应用层
- 音频源和音频监听脚本
- 《PC Assembly Language》读书笔记
- 众筹时代 - Web众筹平台
- html怎么复制一行,js实现复制，删除一行div或一行table
- msconfig设置最大内存导致电脑无法启动解决方法
- GitHub清华、北大、浙大、上海交大计算机系项目整理分享