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. Android基于XMPP Smack Openfire下学习开发IM(六)总结

    不管学习什么都应该总结 这里我把关于Xmpp的一些方法整理到一个工具类中了 我就分享给大家 XmppConnection.java package com.techrare.utils; import ...

  2. php 写一个水仙花数的函数

    判断一个数是不是水仙花数 <?php function is_shuixianhua($i) { $length=strlen($i); $i=(string)$i; $sum=0; for($ ...

  3. 普通身份运行Tomcat

    普通身份运行Tomcat 转载1   权限分配问题 su - username -c “command”这样的形式可以使用任意一个有执行权限的用户执行 -c后边的命令. 注意,- username中间 ...

  4. Ajax-$.ajax()方法详解

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

  5. 仿QQ迷你首页（VC++,MFC）（迷你资讯）的开发与实现（源代码）

    由于需求,需要写个类似QQ迷你资讯首页的东西,就花了一点时间写了写,软件效果截图如下: 程序的主要核心代码如下: 程序的全部源代码下载地址:http://download.csdn.net/downl ...

  6. Android（java）学习笔记177：BroadcastReceiver之 应用程序安装和卸载 的广播接收者

           国内的主流网络公司(比如网易.腾讯.百度等等),他们往往采用数据挖掘技术获取用户使用信息,从而采用靶向营销.比如电脑上,我们浏览网页的时候,往往会发现网页上会出现我们之前经常浏览内容的商 ...

  7. JPA entity versioning (@Version and Optimistic Locking)

    详情见: http://www.byteslounge.com/tutorials/jpa-entity-versioning-version-and-optimistic-locking

  8. C#语法糖之第六篇: 泛型委托- Predicate<T>、Func<T>

    今天继续分享泛型委托的Predicate<T>,上篇文章讲了Action委托,这个比Action委托功不一样的地方就是委托引用方法是Bool返回值的方法,Action为无返回值.首先我们看 ...

  9. <script runat=server>、<%%>和<%#%>的区别

    ①<script runat="server">代码段与<%%>内联代码段的区别 在asp.net页面的aspx文件中允许使用<script runa ...

  10. EnumWindows 使用

    转载自csdn:http://blog.csdn.net/hairi/article/details/548064   EnumWindows 用来列举屏幕上所有顶层窗口. MSDN原话: The E ...