天天看点

前端设计必备-Font awesome 插件使用菜鸟言语 font awesome 是一个封装好的“插件”、你在使用的时候 直接调用对应的类即可。

原理:是将icon做成了字体、然后封装起来、对于我们而言 操控字体比操控图片  我们容易很多。

下载最新版本的文件、解压之后、将“css”和"fonts"两个文件夹复制到当前工作目录跟目录下。注意:一定要将fonts放入、并且与

css同级!  

 结构如图即可!

准备工作做好之后

接下来就可以动手感受一下font awesome的魅力了!新建一个空页面。随便写一个标签、

<i class="fa fa-link"></i>

备注:fa为统一的样式、必须填写、   后面的为对应的图标的类、这样出来的效果就是你想要的。这个链接样式是封装好的、你如果想改变、只需要在自己的样式表里面复写其样式即可、eg: fa-link{ color:#000000; font-size:16px }

  这样、图标就会变黑变大!  是不是很自由呢?

    只需要在输入框输入你想要寻找的图标、大部分都会出来的、

当然、现在这个库还不是很完善、但是在不断地壮大。如今已经由最初的几十个图标增长到五百多个了。

大家可以来看官方的宣传语

接下来大家又想了、这个东西这么美、那兼容性呢?

实话实说、font awesome一直以来对ie的支持都不是很理想、之前font awesome官方出过对font awesome 3.2.1的ie7兼容性解决方案,但其最新版本4.2.0至今未有任何动作。 thinkcmf秉承开放至精神,集己所力推出font awesome 4.2.0兼容性解决方案,目前已完美兼容至ie7。

兼容性解决方案:

在 <code>&lt;head&gt;</code> 标签

里, 引入 font-awesome.min.css. 

&lt;linkrel="stylesheet"href="path/to/font-awesome/css/font-awesome.min.css"&gt;

&lt;linkrel="stylesheet"href="path/to/font-awesome/css/font-awesome-ie7.min.css"&gt;