开始使用Font Awesome字体图标
& 开始使用
简单的介绍如何将Font Awesome 3.2.1应用到你的网站！
只需要两行代码就可以将Font Awesome应用到你的网站上，或者你可以使用LESS来定制你的样式！更重要的是Font Awesome在上非常友好！
用两行代码添加Font Awesome + Bootstrap到你的网站。你甚至不用下载或者安装任何东西！
复制下面这两行代码到你的网站 &head& 标签中。
&link href=&///twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css& rel=&stylesheet&&
&link href=&///font-awesome/3.2.1/css/font-awesome.css& rel=&stylesheet&&
Pat yourself on the back for your scalable-vector-icons-on-the-website
in two lines of code.
开始使用Font Awesome!
使用这个方法获取font awesome到你的Bootstrap中.
复制 font-awesome 文件到你的项目目录中.
在 &head& 头部应用你的 font-awesome.min.css 路径.
&link rel=&stylesheet& href=&path/to/bootstrap/css/bootstrap.min.css&&
&link rel=&stylesheet& href=&path/to/font-awesome/css/font-awesome.min.css&&
开始使用Font Awesome!
使用LESS这种方法来自定义你的Font Awesome和Bootstrap.
复制 font-awesome 目录到你的项目目录中.
打开你的项目 bootstrap/bootstrap.less 并替换
@import &sprites.less&;
@import &path/to/font-awesome/less/font-awesome.less&;
打开你的项目 font-awesome/variables.less 并编辑 @FontAwesomePath 变量指向你的字体目录。
@FontAwesomePath:
&../font&;
Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.
开始使用Font Awesome!
Font Awesome 同样能够正常使用.
复制 font-awesome目录到你的项目中.
按照下面的路径并去掉你的Bootstrap目录
打开你项目的font-awesome.less 或者 font-awesome.min.css 并编辑字体位置到你的目录(see above examples).
开始使用Font Awesome!
Font Awesome支持IE7.
保证Font Awesome在现代浏览器中能够正常使用.
复制一份 font-awesome-ie7.min.css 到你的项目中.
在头部 &head& 参考你字体路径添加 font-awesome-ie7.min.css.
&link rel=&stylesheet& href=&path/to/bootstrap/css/bootstrap.min.css&&
&link rel=&stylesheet& href=&path/to/font-awesome/css/font-awesome.min.css&&
&!--[if IE 7]&
&link rel=&stylesheet& href=&path/to/font-awesome/css/font-awesome-ie7.min.css&&
&![endif]--&
去向需要你兼容IE7的家伙抱怨吧。。.CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
今天就从一个简单的圆形菜单的实现，使用CSS3+font字体文件实现圆形菜单，下面来总结一些最近学习的收获，感兴趣的朋友可以参考下哈
在平常项目中，偶尔也会涉及一些前端的设计，但毕竟不是专业的，所以一直想要系统的学习一下。最近辞职了，等待入职新公司的期间，有空折腾学习一些CSS3的知识。 今天就从一个简单的圆形菜单的实现，来总结一些最近学习的收获。效果图如下：
下面，就来看看这个圆形半透明的菜单如何实现： 1. 我们使用一个 ul 来制作菜单，代码如下： 代码如下: &ul& &li& &a href="#"& &span&首页&/span& &/a& &/li& &li& &a href="#"& &span&用户&/span& &/a& &/li& &li& &a href="#"& &span&活动&/span& &/a& &/li& &/ul& 效果如下：
2. 为ul添加样式（ulMenu）以及其下的li，a，span，美化一下菜单: 代码如下: .ulMenu { list-style: } .ulMenu li { float: height: 80 width: 80 padding: 0; margin: 0; text-align: list-style: margin: 10px 10px 0 0; } .ulMenu li a { display: height: 100%; padding: 0 15 font-size: 12 font-weight: color: # text-decoration: } .ulMenu li a span { display: } 效果如下：
3. 如何让菜单变成圆的，其实只要先将元素设置为长宽相等的正方形，再设置圆角为其长度的一半即可，例如，此例子中，li 的长宽是80px,则我们设置其圆角为40px，我们将 li 的样式改为如下，增加圆角和背景色： 代码如下: .ulMenu li { float: height: 80 width: 80 padding: 0; margin: 0; text-align: list-style: background: rgba(0,0,0,0.3); border-radius: 40 -moz-border-radius:40 -webkit-border-radius: 40 margin:10px 10px 0 0; } 效果如下：
4. 这样离我们要的效果还有些差距，我们要加一些图标上去。CSS3的可以引入font字体可以让我们省去找图标的麻烦，我们可以直接引入font字体文件，这个下一步再详细说，这里，我们先改动一下菜单的 html 代码，用 个容器来显示图标，这里我们用 i 元素，改动后代码如下: 代码如下: &ul class="ulMenu"& &li& &a href="#"& &i&&/i& &span& 首页 &/span& &/a& &/li& &li& &a href="#"& &i&&/i& &span& 用户 &/span& &/a& &/li& &li& &a href="#"& &i&&/i& &span& 活动 &/span& &/a& &/li& &div style="clear:"& &/div& &/ul& 给 i 添加样式： 代码如下: .ulMenu li a i { display: inline- width: 24 height: 24 margin-top: 17 margin-bottom: .25 font-size: 28 } 效果如下：
5. 网上定制的font字体现在附带很多常见图标（可参照 http://astronautweb.co/snippet/font-awesome/ ，字体可到此处下载）：
下载font字体，在样式文件中引用： 代码如下: @font-face { font-family: 'FontAwesome'; src: url('font/fontawesome-webfont.eot'); src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('font/fontawesome-webfont.woff') format('woff'), url('font/fontawesome-webfont.ttf') format('truetype'), url('font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), url('font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); font-weight: font-style: } 6. 接着，我们可以用下面形似的样式来制定图标： 代码如下: .css:before { content: "\f001"; } 但是图标很多，我们可以直接引入下载的font文件下面css文件夹下的 font-awesome.css样式文件，也就是说，上面的一大堆字体文件引用都可以省略为（当然，真实开发中考虑到模块化引入css加载性能略影响，个人觉得应少用，希望有经验的前辈赐教）： 代码如下: @import url('font-awesome.css'); 为 i 添加对应 css： 代码如下: &ul class="ulMenu"& &li& &a href="#"& &i class="icon-home"& &/i& &span& 首页 &/span& &/a& &/li& &li& &a href="#"& &i class="icon-user"& &/i& &span& 用户 &/span& &/a& &/li& &li& &a href="#"& &i class="icon-th-large"& &/i& &span& 活动 &/span& &/a& &/li& &div style="clear:"& &/div& &/ul& 效果如下：
7. 最后一步，添加鼠标移动上去时改变颜色，添加如下样式： 代码如下: .ulMenu li a:hover { color: #F90; } 效果如下：
猛戳【】下载例子。如何应用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或者其它类型的页面中引入样式文件，如下：&link href=&css/font-awesome.css& rel=&stylesheet& /&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: font-style:}必然重视此中的src:url（）中的路径是不是当前与当前项目标实际路径向匹配。4.最后在页面中参加响应的html元素，并且遵守font awesome定义好的样式为须要添加矢量图标的元素指定样式。：&div class=&list-group&&
&a class=&list-group-item& href=&＃&&&i class=&fa fa-home fa-fw&&&/i&
Home&/a&
&a class=&list-group-item& href=&＃&&&i class=&fa fa-book fa-fw&&&/i&
Library&/a&
&a class=&list-group-item& href=&＃&&&i class=&fa fa-pencil fa-fw&&&/i&
Applications&/a&
&a class=&list-group-item& href=&＃&&&i class=&fa fa-cog fa-fw&&&/i&
Settings&/a&
&/div&
&i class=&fa fa-spinner fa-spin&&&/i&
&i class=&fa fa-circle-o-notch fa-spin&&&/i&
&i class=&fa fa-refresh fa-spin&&&/i&
&i class=&fa fa-cog fa-spin&&&/i&
&i class=&fa fa-car&&&/i&
&i class=&fa fa-car fa-3x&&&/i&别的，font awesome 和BootStrap连络可以达到更好的结果。
其他类似问题
为您推荐：
.css&或者直接把源文件下载到本地;i&gt.2;css/fa fa-area-chart&// rel=&&&/font-awesome/i class=&quot；2，然后用标签引用其样式如&lt.0/&gt.bootstrapcdn.font-4;/link href=&quot，首先要引用其css和字体&lt
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁网站引用FontAwesome字体图标的时候是框框乱码_百度知道
网站引用FontAwesome字体图标的时候是框框乱码
bootcss://www:///p/font-awesome/#integration用相对路径.com/p/font-awesome/#integration" target="_blank">http.bootcss按照Bootstrap中文网的教程集成<a href="http
提问者采纳
css中有对字体文件的引用，在font-awesome，一般都是这种问题引起的。通常情况下你去看看font-awesome的css文件，查下字体文件和css文件的相对路径是否正确
提问者评价
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁