http://fortawesome.github.io/Font-Awesome/whats-new/

使用Font Awesome替换你的网站图标

******************IE7BUG begin*********************

问题:
Font-Awesome字体在ie7上不能toggle,原因是Font-Awesome在ie7上使用expression完成显示的。目前网上有很多遇到的但没找到解决方案。 解决方案:
比较蠢,采用clone/append完成class的toggle。目前只想到这种方案。欢迎更完美的解决方案。 html
Html代码 收藏代码
<a class="btn btn-link icon-plus-sign"></a> js
Java代码 收藏代码
$(function() {
$(".btn").click(function() {
$(".btn").each(function() {
//如果是ie7
if(/MSIE 7.0/ig.test(navigator.appVersion)) {
var $aClone = $(this).clone(true);
if($aClone.hasClass("icon-minus-sign")) {
$aClone.addClass("icon-plus-sign").removeClass("icon-minus-sign");
} else {
$aClone.addClass("icon-minus-sign").removeClass("icon-plus-sign"); }
$(this).after($aClone);
$(this).remove(); } else {
$a.toggleClass(openIcon);
$a.toggleClass(closeIcon);
} }); return false; });
}); 最后必须return false; 否则会造成ie7浏览器crash掉。

******************IE7BUG end*********************

Font Awesome,原只为Bootstrap而设计的字体图标,不过,现在你可以单独用它来为你的网站工作。丢掉图片图标吧,跟我一起来用Font Awesome。

Font Awesome 特性:

1、一个字体文件, 249 个图标。

2、用CSS控制样式。

3、无限缩放。

4、个人、商业均可自由使用。

5、支持IE7+。

6、在Retina屏幕上也能完美呈现。

7、设计师的助手。

8、兼容屏幕阅读器。

Font Awesome的使用:

1、先下载Font Awesome字体样式文件和字体。CSS样式文件下载清点这里字体下载请点这里

2、将下载的字体和CSS样式文件拷贝到你的项目目录中去。

3、随便选择一个CSS样式文件,你可以选择font-awesome.less或者font-awesome.min.css作为你的图标样式文件。

4、打开你所选择的样式文件,编辑样式文件中的字体路径,当然这个路径是针对你css样式文件位置来确定的。

5、在你的项目中引用样式文件即可。

例如:

 
1
<link rel="stylesheet" href="../css/font-awesome.min.css">

or

 
 
1
<link rel="stylesheet" href="../css/font-awesome.css">

如需兼容IE浏览器,那请下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。

 
1
2
3
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<![endif]-->
  • 6、在你需要使用这些图标的地方加上一个html标签,给该标签一个class属性,属性值请参阅 Font Awesome图片集

例如:

当然,这些样式你可以自己定义的,但是为了兼容性,最好还是使用原版的吧!

使用Font Awesome替换你的网站图标的更多相关文章

  1. 使用Font Awesome替换你的网站图标(icons 图标)

    http://www.thinkcmf.com/font/icons/ 第一次使用 Font Awesome 发现相当的爽呀!它的图标很全,能够帮你节约时间去找图片.下面就来一起学习吧: 1: 去官方 ...

  2. Font Combiner – 自定义网页字体和图标生成工具

    Font Combiner 是一个功能丰富的 Web 字体生成工具和字体改进工具,提供字距调整.构造子集.各种提示选项和自定义字体字形组合.您可以生成您自己的自定义字体的格式和文件大小. 另外还有成千 ...

  3. WordPress添加网站图标

    如何给WordPress添加网站图标_百度经验 http://jingyan.baidu.com/article/54b6b9c0d549622d583b4788.html   看到很多网站都带有ic ...

  4. 图标集锦:10套免费的社交媒体 & 社交网站图标

    社交网络是最近几年互联网领域最热门的关键词之一,如今社会网络化媒体也成为我们信息获取和传播的重要途径,很多网站都有把内容分享到社交媒体的功能. 社交媒体图标作为向用户传递信息的重要媒介,不管是在网页还 ...

  5. 超赞!12套你没见过的社交媒体 & 社交网站图标

    如今,社交网络成为我们信息获取和传播的重要途径,很多网站都有把内容分享到社交媒体的功能.社交媒体图标作为向用户传递信息的重要媒介,不管是在网页还是 Web 应用程序中都非常需要.今天这篇文章和大家分享 ...

  6. 替换应用程序exe图标,主要使用BeginUpdateResource,UpdateResource API函数

    替换应用程序exe图标,主要使用的API函数是BeginUpdateResource(),UpdateResource(),EndUpdateResource()来使用自定义的ico文件类替换exe程 ...

  7. 网站图标 favicon.ico

    默认情况下,浏览器访问一个网站的时候,同时还会向服务器请求“/favicon.ico”这个URL,目的是获取网站的图标. 若没有配置的话,Django就会返回一个404错误,并且浏览器接收到这个404 ...

  8. 再谈获取网站图标Icon

    上一篇文章讨论了一下获取网站图标方法,是通过从根目录直接获取和html解析结合的方式来获取的,并给出了相应的代码示例.这一篇来讨论一个更现成的方法,这个方法是从360导航的页面发现的,在导航页面中点击 ...

  9. 上传网站后建议执行:chown www:www -R /path/to/dir 对网站目录进行权限设置,/path/to/dir替换为你网站目录。

    上传网站后建议执行:chown www:www -R /path/to/dir 对网站目录进行权限设置,/path/to/dir替换为你网站目录.

随机推荐

  1. aChartEngine图表显示(一页显示多张图表)

    在看本篇的时候,请确认已经看过了 某android平板项目开发笔记----aChartEngine图表显示(1) 不然,有些地方这里就不再说明… 关于XYMutilpleSeriesDataset 一 ...

  2. Redis的几个认识误区

    此文作者是新浪微博平台架构师杨卫华timyang大师,是他对Redis研究的一个总结,澄清了一些认识上的误区,值得一读. James Hamilton在On Designing and Deployi ...

  3. JS Number对象

    数字属性 MAX_VALUE MIN_VALUE NEGATIVE_INFINITY POSITIVE_INFINITY NaN prototype constructor 数字方法 toExpone ...

  4. css布局2

    居中 常用居中 elemP{ text-align: center; } elelmP elemC{ display: inline-block; } elemP{ display: table; m ...

  5. 在IOS手机safari浏览器的无痕模式下,localStorage不起作用

    无痕模式是黑色风格,正常模式是白色风格.在无痕模式中,使用localStorage.setItem()会报错,但在window对象下确实有localStorage.setItem方法. if (typ ...

  6. iOS __strong __weak @Strongify @Weakify

    @Strongify,@Weakify主要是在block中使用. 因为block一般都在对象内部声明.. 如果在block内部使用了当前对象的属性,就会造成循环引用(block拥有当前对象的地址,而当 ...

  7. docker不稳定 short running containers with -rm failed to destroy

    正常运行以下命令 sudo docker run --rm busybox echo helloworld /var/log/upstart/docker.log 日志如下: // :: POST / ...

  8. 【原】iOS学习41之多线程

    1. 多线程概述 1> 程序.进程和进程的概念 程序:由源代码生成的可执行应用.(例如:QQ.app) 进程:一个正在运行的程序可以看做一个进程.(例如:正在运行的QQ就是一个进程),进程拥有独 ...

  9. BZOJ2706 : [SDOI2012]棋盘覆盖

    A类数据: 将棋盘黑白染色,相邻的点之间连边,求出二分图最大匹配即可. B类数据: 答案为$\lfloor\frac{n^2-1}{3}\rfloor$,用FFT加速计算即可,时间复杂度$O(L\lo ...

  10. BZOJ 2626 & KDtree

    题意: 二维平面n个点 每次给出一个点询问距离第k小的点. SOL: kdtree裸题,抄了一发别人的模板...二维割起来还是非常显然的.膜rzz的论文. 不多说了吧.... Code: /*==== ...