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

UI图标不用愁:矢量字体图标Font-Awesome的更多相关文章

  1. WPF自定义控件与样式(1)-矢量字体图标(iconfont)

    一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...

  2. UWP 矢量字体图标(iconfont)使用

    本文使用 阿里巴巴开源字体: 选择矢量字体图标: 查看或编辑 Unicode编码 或字体名称 下载到本地,添加到uwp项目 代码中写法 Text:Unicode编码 FontFamily:文件路径#字 ...

  3. WPF使用矢量字体图标(阿里巴巴iconfont)

    原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78 ...

  4. WPF矢量字体图标(iconfont)

    原文:WPF矢量字体图标(iconfont) 转载:点击打开链接 步骤: 一.下载添加iconfont文件 二.添加到资源文件夹,并设置不复制,且为资源文件 三.增加FIcon.xaml文件 < ...

  5. 如何应用Font Awesome矢量字体图标

    Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库.这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外, ...

  6. Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标

    Font Awesome 为您提供了一套可缩放的字体矢量图标,可以快速自定义图标的大小,颜色,阴影,这些都可以通过CSS来实现,无需任何的JS代码哦. 一,主要特点如下: 1,一个字体,369个图标 ...

  7. Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标,新浪、人人 的矢量图标也到其中哟

    要求 必备知识 本文要求基本了解html与css前端代码. 运行环境 普通浏览器,兼容IE7 源码下载 下载地址 Font Awesome 为您提供了一套可缩放的字体矢量图标,可以快速自定义图标的大小 ...

  8. 如何将svg图标快速转换成字体图标?

    今天遇到一个客户需要我将页面的图标做成字体图标,想想哎可能整的麻烦,不过想想这也是对项目的一个优化 ( 1.字体图标直接用color自由控制颜色:2.整合在一起,减少http请求等     PS:平时 ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):带有字体图标的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 高性能MySql进化论(十一):常见查询语句的优化

    总结一下常见查询语句的优化方式 1        COUNT 1.       COUNT的作用 ·        COUNT(table.filed)统计的该字段非空值的记录行数 ·         ...

  2. CodeIgniter开发实际案例-新闻网站【转】

    CodeIgniter开发实际案例-新闻网站 转:http://blog.csdn.net/ict2014/article/details/22104711?utm_source=tuicool&am ...

  3. Java 5种字符串拼接方式性能比较

    http://blog.csdn.net/kimsoft/article/details/3353849 import java.util.ArrayList; import java.util.Li ...

  4. JMeter入门(1):JMeter总体介绍及组件介绍

    一.JMeter概述 JMeter就是一个测试工具,相比于LoadRunner等测试工具,此工具免费,且比较好用,但是前提当然是安装Java环境: JMeter可以做 (1)压力测试及性能测试: (2 ...

  5. ubuntu给手机建wifi

    声明 笔者近期意外的发现 笔者的个人站点http://tiankonguse.com/ 的非常多文章被其他站点转载,可是转载时未声明文章来源或參考自 http://tiankonguse.com/ 站 ...

  6. IOS开发之——使用Segue在StoryBoard之间切换

    使用Segue能够在ViewController之间来回切换,以下就来说下切换方法: 1. 使用点击button进行切换 直接上图,在须要切换的View属性界面,点击Modal然后拉到前一个view界 ...

  7. richTextBox插入表格 完整版

    附件 http://files.cnblogs.com/xe2011/richTextBox_InsertTable_Full.rar 调用 richTextBoxTableDlg dlg = new ...

  8. thinkphp连接oracle

    配置文件中: //Oracle 测试环境    'DB_TYPE'     => 'Oracle',             // 数据库类型    'DB_HOST'     => '1 ...

  9. POJ 1845 Sumdiv(因子分解+快速幂+二分求和)

    题意:给你A,B,让求A^B所有的因子和模上9901 思路:A可以拆成素因子的乘积: A = p1^x1 * p2^x2 *...* pn^xn 那么A^B = p1^(B*x1) * p2^(B*x ...

  10. C#基础入门--关于C#背景介绍以及变量相关

    在正式探索C#的奥秘之前,我们先谈一谈关于学习方法的问题吧.你会不会有这样的感悟,自己努力奋斗得到的东西倍加珍惜,飘到眼前的,却不屑一顾.我认为,学习的整个历程亦是如此.在学习过程中,只有我们遇到了问 ...