Font Awesome

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

如何使用:

最简单的方式:BootstrapCDN (由MaxCDN提供)

一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西!

    将以下代码粘贴到网页HTML代码的 <head> 部分.

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
                           

    当新版本发布时,BootstrapCDN需要一点时间来同步到最新版本。稍安勿躁 :)
    参考示例,然后开始使用Font Awesome吧!

简单方式之一:使用默认CSS

如果您使用了默认的Bootstrap CSS样式,那么你可以使用这种方式来引入默认的Font Awesome CSS样式。

    复制整个 font-awesome 文件夹到您的项目中。
    在HTML的 <head> 中引用font-awesome.min.css。

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

    参考示例,然后开始使用Font Awesome吧!

简单方式之二:LESS Ruby Gem

使用 官方 Font Awesome LESS Ruby Gem 可以简单方便的将 Font Awesome LESS 集成到Rails项目中。由 @supercodepoet 维护。

    将下面这行代码加入到应用的Gemfile中:

    gem 'font-awesome-less'
                           

    然后执行:

    $ bundle
                           

    或者自行安装:

    $ gem install font-awesome-less
                           

简单方式之三:SASS Ruby Gem

使用 官方 Font Awesome SASS Ruby Gem 可以简单方便的将 Font Awesome SASS 集成到Rails项目中。由 @supercodepoet 维护。

    将下面这行代码加入到应用的Gemfile中:

    gem 'font-awesome-sass'
                           

    然后执行:

    $ bundle
                           

    或者自行安装:

    $ gem install font-awesome-sass
                           

进阶方式:自定义 LESS 或 SASS

使用LESS或SASS的方法来自定义 Font Awesome 4.3.0 。

    复制 font-awesome/ 目录到您的项目中。
    打开 font-awesome/less/variables.less 文件或 font-awesome/scss/_variables.scss文件 ,然后修改 @fa-font-path 或 $fa-font-path 为您的字体目录。

    @fa-font-path:   "../font";
                           

    字体路径是相对于编译的CSS目录。
    如果使用了静态编译器,那么重新编译LESS或SASS文件。如果没有,那么现在应该一切OK了。
    参考示例,然后开始使用Font Awesome吧!

 参考网址:

http://www.bootcss.com/p/font-awesome/

FontAwesome 4.1.0 中完整的439个图标样式CSS参考:

http://www.yeahzan.com/fa/facss.html

Bootstrap
简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

http://www.bootcss.com/

 

Copyright © 2014-2024 it689.com (京ICP备12032795号-2) 版权所有 Power by IT689