如何应用Font Awesome矢量字体图标

最简单的方法是直接使用官方提供的cdn，在你的html页面里添加：

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

代码样式如下：

<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

在html中使用图标字体的方法：

1、创建自己的iconfont，推荐使用iconmoon，使用它可以通过上传SVG或者字体来生成你需要的icon字体，本文在线演示使用iconmoon生成。

步骤1：选择页面提供的或者上传自己的

步骤2：指定字符映射

3、导入到页面使用css：

style.css写法如下：

 @font-face

{

 

 

 

 font-family:

'icomoon'

 

 

 

 src:url('fonts/icomoon.eot')

 

 

 

 src:url('fonts/icomoon.eot?#iefix')

format('embedded-opentype'),

 

 

 

 

 

 url('fonts/icomoon.woff')

format('woff'),

 

 

 

 

 

 url('fonts/icomoon.ttf')

format('truetype'),

 

 

 

 

 

 url('fonts/icomoon.svg#icomoon')

format('svg')

 

 

 

 font-weight:

normal

 

 

 

 font-style:

normal

 

 }

估计很多前端人员都知道FontAwesome是一套免费而且好用的Web字体图标，只要在CSS引入这个字体icon，它就可以直接通过class来生成一个图标，而且免费使用。目前图标数量已经更新至585个之多，包含常用的APP UI应用图标、品牌图标等。今天教大家如何将FontAwesome直接在Photoshop或AI上使用，这样日后做UI设计也方便多了，下面我们说说方法。STEP 1：下载Fontawesome字体 官方下载地址：fortawesome.github.io/Font-Awesome 下载后，将TTF文件安装到系统的字体目录。 STEP 2：在PS或AI上使用Font Awesome图标字体 打开Cheatsheet页面：fortawesome.github.io/Font-Awesome/cheatsheet/选中你需要的图标，复制，如下图：STEP 3： 在PS或AI上粘贴上去(文字输入状态下)，这时你可能看到是这样的，别急，看下面。那是因为我们没有选择字体，把字体选择为Font Awesome就OK了，如下图：好了，如果还有不懂的请在本文下方留言。 另附PS一次性删除所有隐藏图层和空白无内容图层方法 删除所有隐藏图标 点击图层面板右上角菜单，选择【删除隐藏图层】，这样软件会自动删除所有的隐藏的图层了。删除所有空白图层 点击【文件】菜单，选择【脚本 – 删除所有空图层】，这样软件就会删除所有空白、无内容的图层啦以上方法很简单，特别对于大文件处理，还是很有帮助的。

---