Font Awesome 为您提供了一套可缩放的字体矢量图标,可以快速自定义图标的大小,颜色,阴影,这些都可以通过CSS来实现,无需任何的JS代码哦。
一,主要特点如下:
1,一个字体,369个图标
2,无需要使用JavaScript
3,通过CSS自定义图标的大小,颜色,阴影
4,用户界面友好
5,支持 Internet Explorer 7 浏览器
6,能够在 Retina 屏幕完美呈现
7,和其它图标字体不同,兼容屏幕阅读器
8,可扩展性强
9,文档完善
10,免费
二,图标类型下面简单罗列一下吧,这里只列出了部分,完整图标列表请查看这里:
1,Web应用程序常用图标:
2,表单控件图标
3,货币图标
4,文本编辑器的图标
5,网页定向图标
6,播放器图标
7,品牌图标
三,使用方法
方式一:
此方法使用最为简单,BootstrapCDN 方式
在自己网页的head标签中引入如下代码即可,不需要下载和安装任何东西即可使用:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
方式二:
此方式需要下载 Font Awesome项目文件夹
将Font Awesome 目录 拷贝到你的项目中,然后在head标签中引入如下代码:
<link rel="stylesheet" href=" your project(你的项目路径)/font-awesome/css/font-awesome.min.css">
具体如何在网页中添加这些矢量图标请查看如下地址:
http://fortawesome.github.io/Font-Awesome/examples/
完整图标列表请查看这里
Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标的更多相关文章
-
Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标,新浪、人人 的矢量图标也到其中哟
要求 必备知识 本文要求基本了解html与css前端代码. 运行环境 普通浏览器,兼容IE7 源码下载 下载地址 Font Awesome 为您提供了一套可缩放的字体矢量图标,可以快速自定义图标的大小 ...
-
如何应用Font Awesome矢量字体图标
Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库.这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外, ...
-
php在5.5.0默认提供了Zend OPcache
eaccelerator无法兼容php5.5.0,好在php在5.5.0默认提供了Zend OPcache,所以一直习惯eaccelerator的朋友如果要升级到php5.5.0的话,可能要暂时和ea ...
-
Font Awesome 4.0.3 字体图标完美兼容IE7
1.下载Font Awesome 4.0.3兼容包,http://www.thinkcmf.com/index.php?m=font 2.解压,并放到自己网站系统合适的位置(如果你的站已使用Font ...
-
在nuxt中引入Font Awesome字体图标库
介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...
-
字体图标Icon Font
字体图标Icon Font 前段时间研究怎样做字体图标,在网上查找诸多资料,诸多尝试,找到一套可以自己制作自己独立控制的制作流程,公司按照这套流程形成一套自己公司图标,本人目前所在公司已经在使用没有发 ...
-
icon font字体图标字库汇总
最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...
-
Font Awesome字体图标
1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...
-
字体图标 icon font
Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够*地变化 颜色能够*地改动 加入阴影效果 * ...
随机推荐
-
oracle中substr() instr() 用法
--substr(字符串,截取开始位置,截取长度)=返回截取的字 ,) from dual;--返回结果为:m ,) from dual;--返回结果为:m--说明0和1都表示截取的位置为第一个字符 ...
-
Java Bytecode Instructions List
monic Opcode(in hex) Other bytes Stack[before]→[after] Description aaload 32 arrayref, index → val ...
-
远程测试mysql数据库3306端口报错
错误现象:[root@localhost ~]# telnet 192.168.10.130 3306Trying 192.168.10.130...Connected to 192.168.10.1 ...
-
src 和 href 的区别
因为理解不深,到写外部加载Javascript文件或者css文件的时候总是需要去找个例子,这样可不好.现在总结下 href 属性规定被链接文档的位置(URL). href是hyperrefresh的缩 ...
-
Redis启动多端口,运行多实例(转)
使用redis在同一台机器上,启用多个端口,实现多个实例,完成集群的模拟实现. 启动多实例 redis默认启动端口为6379,我们可以使用 --port 来指定多个端口,如下,在linux终端命令: ...
-
Android必知必会-长按返回健退出
背景 平常比较常见的都是一定时间间隔内按两次返回键来退出应用,并且第一次点击会有相应的提示,网上资料比较多,这里写一下,长按返回键退出. 实现 实现的方案常用的有两个: 重写dispatchKeyEv ...
-
[Swift]LeetCode386. 字典序排数 | Lexicographical Numbers
Given an integer n, return 1 - n in lexicographical order. For example, given 13, return: [1,10,11,1 ...
-
用 LSTM 做时间序列预测的一个小例子(转自简书)
问题:航班乘客预测 数据:1949 到 1960 一共 12 年,每年 12 个月的数据,一共 144 个数据,单位是 1000 下载地址 目标:预测国际航班未来 1 个月的乘客数 import nu ...
-
Eclipse 修改自动补全触发器只能输入四个字符为多个字符
如果eclipse中的[auto activation triggers for java]自动补全触发器这个位置的文本框有时候只能输入4个字符, 可以通过修改配置文件的方法实现,具体操作步骤如下: ...
-
第一章:帝国的余晖 AT&;T公司
启示:自己的想法,有好的技术比什么都重要,一定要注意的是技术,不要贪小便宜,明白自己最先关心的的哪个事情. 书中内容:没有人能活两百岁,也没有公司能辉煌两百年,这就是规律,很难超越.