fontawesome（font awesome怎么用）

本文目录

• font awesome怎么用
• 如何引入font-awesome
• 如何在PS上使用Font Awesome字体
• 怎么调整font awesome图标大小

font awesome怎么用

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这标字体集几乎囊括了网页中可能用到的所有图标，除了包含 Twitter Boostrap 的默认图标外，还有社交收集图标、Web 应用法度图标和器图标等等，可以免费用于贸易项目。下面仅记录应用步调：1.到官网高低载最新版本的Font Awesome.2.解压文件，将此中的css和fonts文件夹拷贝到项目中，此中css文件夹中有两个css文件（font-awesome.css和font-awesome.min.css），fonts下有有5个，如下：3.在须要应用的html或者其它类型的页面中引入样式文件，如下：4.查看font-awesome.css文件，若是引用的是紧缩版的，就要查看那个文件了，打开文件看到第一个样式定义如下：＠font-face {font-family: ““FontAwesome““;src: url（““../fonts/fontawesome-webfont.eot？v=4.1.0““）;src: url（““../fonts/fontawesome-webfont.eot？＃iefix&v=4.1.0““） format（““embedded-opentype““）， url（““../fonts/fontawesome-webfont.woff？v=4.1.0““） format（““woff““）， url（““../fonts/fontawesome-webfont.ttf？v=4.1.0““） format（““truetype““）， url（““../fonts/fontawesome-webfont.svg？v=4.1.0＃fontawesomeregular““） format（““svg““）;font-weight: normal;font-style: normal;}必然重视此中的src:url（）中的路径是不是当前与当前项目标实际路径向匹配。4.最后在页面中参加响应的html元素，并且遵守font awesome定义好的样式为须要添加矢量图标的元素指定样式。： Home Library Applications Settings别的，font awesome 和BootStrap连络可以达到更好的结果。

如何引入font-awesome

如何才能将如此绝佳的Font Awesome Icons引用到自己的网页上呢？下面做详细介绍。最简单的方式：BootstrapCDN （由MaxCDN提供）一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西！将以下代码粘贴到网页HTML代码的 《head》 部分.《link href=“//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css“ rel=“stylesheet“》简单方式之一：使用默认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“》简单方式之二：LESS Ruby Gem自行安装：$ gem install font-awesome-sass进阶方式：自定义 LESS 或 SASS将Font Awesome字体库下载到你的网站服务器中，在HTML的 《head》 中引用font-awesome，此时你就可以在任何地方以下面这种简单方式引用图标：《i class=“fa fa-camera-retro“》《/i》还可以使用 fa-border 以及 pull-right 或 pull-left、fa-spin等指令制造出旋转、边框等特效。

如何在PS上使用Font Awesome字体

　　Font Awesome介绍　　Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识，现在FontAwesome不仅仅可以在bt上使用，还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标，字体图标主要是支持自适应、可以使用字体的各种特性（比如变色、变大变小、字体阴影等）、减少数据加载、样式更容易定义等。　　Font Awesome 特性　　一个字体文件， 369 个图标。　　不需要JavaScript要求：更快的载入速度　　无限的可扩展性：可伸缩矢量图形意味着每一个图标在任何大小看起来真棒。　　自由免费：你可以将它应用到你的商业中。　　CSS控制：轻松的定义图标的颜色，大小，阴影，和任何与CSS相关的特性。　　完美的视网膜显示：使用矢量字体，这意味着他们可以完美的显示在高分辨率显示器中　　为BootStrap而生：完全的兼容BootStrap新版3.0　　桌面友好：你可以查看字体的样式列表　　兼容屏幕阅读器：不像其他字体图标不兼容屏幕阅读器　　Font Awesome的使用　　你只需要到： fontawesome.io下载压缩包然后解压到你的项目中。　　在你的HTML头部的head里面添加对相应的font-awesome的样式。　　《link rel=“stylesheet“ href=“path/to/font-awesome/css/font-awesome.min.css“》　　根据这里的案例开始你的项目。　　如需兼容IE浏览器，可以使用Font-awesome的3.2.1版本。下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。　　《!----》　　转载

怎么调整font awesome图标大小

1、首先在css中复制一个样式文件（如果使用的是less和sass版的到相应的文件夹）；将fonts文件复制。

2、将上述复制的两个文件粘贴到项目中，打开font-awesome.css的文件，根据红框的显示可以知道，css目录和fonts目录是同级的，注意以免找不到图标文件。

3、项目中引入样式文件，直接link进来就行了。

4、应用字体图标《i class=“icon-back fa fa-chevron-left“》《/i》class中的fa必须，然后用你选取的图标名称前+“fa-”。

5、最后如下图红框所以，成功应用了Font Awesome图标了。