博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
UI图标不用愁:矢量字体图标Font-Awesome
阅读量:4599 次
发布时间:2019-06-09

本文共 889 字,大约阅读时间需要 2 分钟。

Font-Awesome,这个项目主要是css3的一个应用,准确的说是一段css,这里的把很多图标的东西做到了font文件里面,然后通过引用外部font文件的方式,来展现图标。

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外,还有社交网络图标、Web 应用程序图标和编辑器图标等等,可以免费用于商业项目。

主要特色:

✓ 一种字体,249个图标,是网页操作的象形语言;

✓ 纯 CSS 控制,能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果
✓ 无限缩放,矢量图标在任何尺寸下都一模一样;
✓ 免费使用,包括商业和非商业项目;
✓ 支持 Internet Explorer 7 浏览器;
✓ 能够在 Retina 屏幕完美呈现;
✓ 完全兼容 Twitter Boostrap 最新版本;
✓ 对设计师友好,设计师能够轻松使用;
✓ 和其它图标字体不同,兼容屏幕阅读器

使用方法

  使用 CSS:
拷贝 Font Awesome 字体目录到项目中;
拷贝 font-awesome.min.css 文件到项目中;
修改 font-awesome.min.css 文件中的字体路径到正确的位置;
在页面的 head 里引入 font-awesome.min.css 文件:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">

QQ交流:187395037

以下是适量字体实例效果

 

 

以上的矢量字体包和CSS实例可以从我的CSDN地址下载

下载地址:http://download.csdn.net/detail/venus150/7141267

转载于:https://www.cnblogs.com/keleyu/p/3643082.html

你可能感兴趣的文章
发布mvc遇到的HTTP错误 403.14-Forbidden解决办法
查看>>
jvm内存模型和内存分配
查看>>
4.循环结构
查看>>
记录一些好用的工具
查看>>
inner join on 三表查询四表查询5表查询不管多少表都可以
查看>>
超链接样式设置(去下划线)(转)
查看>>
[求助]linux同一目录可否挂载多个数据盘?
查看>>
restcontroller和controller区别
查看>>
2016012003+陈琦+散列函数的应用及其安全性
查看>>
Android 状态栏通知Notification、NotificationManager详解
查看>>
如何在Google Map中处理大量标记(ASP.NET)(转)
查看>>
Sublime Text 3中使用正则表达式删除空行
查看>>
UIApplicationDelegate协议
查看>>
再谈iOS 7的手势滑动返回功能
查看>>
Jmeter测试dubbo接口填坑
查看>>
python小练——找出指定目录下小于指定字节的文件,输出到文本文件
查看>>
渐渐磨砺--16年11月封闭总结
查看>>
[zz]GDB调试精粹及使用实例
查看>>
数据库的创建和删除
查看>>
【消息队列MQ】各类MQ比较
查看>>