javascript

Font Awesome 一套绝佳的图标字体库和CSS框架

2019-01-22  本文已影响0人  园木木

今天给大家推荐一套绝佳的图标字体库,使用起来非常简单方便。下面我们来一起看看:

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

 a.一套字库, 675个图标

FontAwesome是一种带有网页功能的象形文字语言,并收集在一个集合里。

 b.不需要 JavaScript 支持

更少的兼容性问题,因为该字体不需要javascript

c.无限的扩展性

可缩放的矢量图形,每个图标在放大或者缩小的时候看起来都正常

 d.完全开源免费

该字体是完全开源并且免费的,查看许可证

 e.CSS 控制

可以轻松的用css来控制字体的颜色,大小,阴影等!

 f.完美支持Retina屏幕

字体是矢量图,这意味着在高分辨率下也会完美显示。

 g.良好的兼容性

最初是为Bootstrap而设计的,现在Font Awesome适用于所有框架。

 h.兼容桌面级应用

如果你需要用于桌面软件设计或一套完整的矢量图,请访问“http://www.fontawesome.com.cn/cheatsheet/”.

 i.兼顾可访问性

与其它字体不同,Font Awesome不会影响屏幕阅读器正常工作。

接下来说一下使用方法:

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

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

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

demo:

<i class="fa fa-camera-retro"></i> fa-camera-retro

2.使用默认CSS

① 复制整个 font-awesome 文件夹到您的项目中。

② 在HTML的 <head> 中引用font-awesome.min.css。

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

demo:

使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x,或者 fa-5x 类 来放大图标。

<i class="fa fa-camera-retro fa-lg"></i>fa-lg

<i class="fa fa-camera-retro fa-2x"></i>fa-2x

<i class="fa fa-camera-retro fa-3x"></i>fa-3x

<i class="fa fa-camera-retro fa-4x"></i>fa-4x

<i class="fa fa-camera-retro fa-5x"></i>fa-5x

3.LESS Ruby Gem

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

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

gem 'font-awesome-less'

②然后执行:

$ bundle

③或者自行安装:

$ gem install font-awesome-less

4.SASS Ruby Gem

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

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

gem 'font-awesome-sass'

②然后执行:

$ bundle

③或者自行安装:

$ gem install font-awesome-sass

5.进阶方式:自定义 LESS 或 SASS

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

①复制 font-awesome/ 目录到您的项目中。

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

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

如果使用了静态编译器,那么重新编译LESS或SASS文件。如果没有,那么现在应该一切OK了。

具体的详解实例可以官网查询

上一篇下一篇

猜你喜欢

热点阅读