Bootstrap + Font Awesome
将Font Awesome 集成到 Bootstrap 非常容易,还可以被单独使用。
最简单的 Bootstrap + Font Awesome 集成方式
使用这种方式将 Font Awesome 集成到默认的 Bootstrap CSS中。
- 拷贝 Font Awesome 字体目录到你的项目中。
- font-awesome.min.css 文件到你的项目中。
- 打开你的项目中的 font-awesome.min.css 文件并编辑字体路径指向正确的位置。
字体路径是相对于你的 CSS 目录的。
- 在html文档中的
<head>
部分,引入 font-awesome.min.css 文件。- <link rel="stylesheet" href="../css/bootstrap.min.css">
- <link rel="stylesheet" href="../css/font-awesome.min.css">
- 在浏览器中打开页面,检查是否正确启用了 Font Awesome!
自定义 Bootstrap + Font Awesome LESS文件的方式进行集成
修改Bootstrap的LESS文件以集成 Font Awesome。
- 拷贝 Font Awesome 字体目录到你的项目中。
- 拷贝 font-awesome.less 文件到 bootstrap/less 目录。
- 打开 bootstrap.less 文件,并将
@import "sprites.less";
替换为@import "font-awesome.less";
- 打开你的项目中的 font-awesome.less 文件,并编辑
@FontAwesomePath
变量,将其值替换为指向字体文件的正确路径。- @FontAwesomePath: "../font";
字体路径相对于存放编译之后的CSS文件的目录。
- 重新编译Bootstrap的所有 LESS 文件。如果你使用的是less.js脚本动态编译的话就能直接在浏览器中看到效果了。
- 在浏览器中打开页面,检查是否正确启用了 Font Awesome!
自定义 Bootstrap + Font Awesome 集成,并使用 SASS 或 SCSS
我也从未使用过SASS或SCSS,如果源码包中的SCSS或SASS文件有问题的话请通知我。
不使用 Bootstrap?
Font Awesome works just as well without Twitter Bootstrap.
- Copy the Font Awesome font directory into your project.
- Copy font-awesome.less or font-awesome.min.css into your project.
- Open your project's font-awesome.less or font-awesome.min.css and edit the font location to point it to your font directory (see above examples).
- Check out the examples to start using Font Awesome!
需要支持 IE7 浏览器?
Font Awesome supports IE7. If you need it, you have my condolences.
- Get Font Awesome working properly in a modern browser.
- Copy font-awesome-ie7.min.css into your project.
- In the
<head>
of your html, reference the location to your font-awesome-ie7.min.css.- <link rel="stylesheet" href="../css/bootstrap.min.css">
- <link rel="stylesheet" href="../css/font-awesome.min.css">
- <!--[if IE 7]>
- <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
- <![endif]-->
- Go complain to whoever decided your project needs IE7 support.
案例
下面的案例大部分都是重用 Bootstrap 文档中的案例。
Use Font Awesome icons in:
- Bulleted lists (like this one)
- Buttons
- Button groups
- Navigation
- Prepended form inputs
- And many more with Custom CSS
New Styles in 3.0
HTML实例
Inline Icons
Place Font Awesome icons just about anywhere with the <i>
tag.
- <i class="icon-camera-retro"></i> icon-camera-retro
更大的图标
通过给图标设置icon-large
、icon-2x
、 icon-3x
或 icon-4x
样式,可以让图标相对于它所在的容器变得更大。
通过应用 icon-large
(增大 33%), icon-2x
, icon-3x
或 icon-4x
样式让图标变得更大。
icon-camera-retro
icon-camera-retro
icon-camera-retro
icon-camera-retro
- <p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
- <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
- <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
- <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
Animated Spinner
Use the icon-spin
class to get any icon to rotate. Works best withicon-spinner
and icon-refresh
.
- <i class="icon-spinner icon-spin"></i> Spinner icon when loading content...
CSS3 animations aren't supported in IE7 - IE9.
Bordered & Pulled Icons
Use icon-border
and pull-right
or pull-left
for easy pull quotes or article graphics.
- <i class="icon-quote-left icon-4x pull-left icon-muted"></i>
- Use a few of the new styles together ... lots of new possibilities.
- <i class="icon-flag icon-4x pull-left icon-border"></i>
- Use a few of the new styles together ... lots of new possibilities.
按钮
Font Awesome 图标能够很好的应用于按钮组件中。将图标设置的再大也可以,Bootstrap中的 pull-right
、pull-left
和 icon-spin
样式都可以应用到图标上。
- <a class="btn" href="#">
- <i class="icon-repeat"></i> Reload</a>
- <a class="btn btn-success" href="#">
- <i class="icon-shopping-cart icon-large"></i> Checkout</a>
- <a class="btn btn-large btn-primary" href="#">
- <i class="icon-comment"></i> Comment</a>
- <a class="btn btn-small btn-info" href="#">
- <i class="icon-info-sign"></i> Info</a>
- <a class="btn btn-danger" href="#">
- <i class="icon-trash icon-large"></i> Delete</a>
- <a class="btn btn-small" href="#">
- <i class="icon-cog"></i> Settings</a>
- <a class="btn btn-large btn-danger" href="#">
- <i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
- <a class="btn btn-primary" href="#">
- <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
按钮组
- <div class="btn-group">
- <a class="btn" href="#"><i class="icon-align-left"></i></a>
- <a class="btn" href="#"><i class="icon-align-center"></i></a>
- <a class="btn" href="#"><i class="icon-align-right"></i></a>
- <a class="btn" href="#"><i class="icon-align-justify"></i></a>
- </div>
下拉菜单按钮
- <div class="btn-group open">
- <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
- <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="icon-caret-down"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
- <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
- <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
- <li class="divider"></li>
- <li><a href="#"><i class="i"></i> Make admin</a></li>
- </ul>
- </div>
列表
- Lists
- Buttons
- Button groups
- Navigation
- Prepended form inputs
Easily replace individual bullets.
- <ul class="icons">
- <li><i class="icon-ok"></i> Lists</li>
- <li><i class="icon-ok"></i> Buttons</li>
- <li><i class="icon-ok"></i> Button groups</li>
- <li><i class="icon-ok"></i> Navigation</li>
- <li><i class="icon-ok"></i> Prepended form inputs</li>
- </ul>
导航条
Use Font Awesome icons in navigation to provide helpful visual cues.
- <ul class="nav nav-list">
- <li class="active"><a href="#"><i class="icon-home"></i> Home</a></li>
- <li><a href="#"><i class="icon-book"></i> Library</a></li>
- <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
- <li><a href="#"><i class="icon-cogs"></i> Settings</a></li>
- </ul>
Prepended form inputs
- <form>
- <div class="input-prepend">
- <span class="add-on"><i class="icon-envelope"></i></span>
- <input class="span2" type="text" placeholder="Email address">
- </div>
- <div class="input-prepend">
- <span class="add-on"><i class="icon-key"></i></span>
- <input class="span2" type="password" placeholder="Password">
- </div>
- </form>
原文链接:http://www.bootcss.com/p/font-awesome/
Bootstrap + Font Awesome的更多相关文章
- Bootstrap & Font Awesome 学习笔记
学习网站:http://bootstrap.ninghao.net/index.html https://www.freecodecamp.cn http://www.runoob.com/boots ...
- Bootstrap,Font Awesome等组件中 .woff字体报404错的解决办法
参考资料:http://www.zhidao91.com/glyphicons-halflings-regular-woff-404-not-found/ http://shiyousan.com/p ...
- Bootstrap基础知识学习
Bootstrap中文网 http://www.bootcss.com/ Bootstrap菜鸟教程 http://www.runoob.com/bootstrap/bootstrap-tutoria ...
- VueJS搭建简单后台管理系统框架(一)环境搭建
做这份笔记的时候,Vue.js还是1.0,10月份Vue已经升级到2.0,这边也进行相应的更新,用Vue2.0进行一个简单的环境搭建 饿了么也刚好开源了其基于Vue.js的UI框架element-ui ...
- Python开发工程师技术手记
Python基础篇 PythonPEP8规范 Python历史与安装 Python注释 Python变量以及类型 Python标识符和关键字 Python输出 Python输入 Python运算符 P ...
- 【前端积累】Awesome初识
前言 之所以要看这个,是因为在看到的一个网站里图表显示的全屏和缩小,anyway ,还是看一下咯~ 一.介绍 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何 ...
- http://www.bootcss.com/p/font-awesome/
集成 将Font Awesome 集成到 Bootstrap 非常容易,还可以被单独使用. 最简单的 Bootstrap + Font Awesome 集成方式 使用这种方式将 Font Awesom ...
- vue-cli 该如何正确打包iconfont?
其实这种问题应该问google的: got wrong bootstrap font path after building · Issue #166 · vuejs-templates/webpac ...
- Spring Boot + Bootstrap 出现"Failed to decode downloaded font"和"OTS parsing error: Failed to convert WOFF 2.0 font to SFNT"
准确来讲,应该是maven项目使用Bootstrap时,出现 "Failed to decode downloaded font"和"OTS parsing error: ...
随机推荐
- win10修改文件管理器默认打开我的电脑
- selenium grid使用(windows+centos7.4)
windows作为hub,centos7.4作为node. firefox用的centos7自带的52版本,懒得更新. vm虚拟机必须设置成bridge模式上网,否则报错.具体参见博文:Vmware改 ...
- 大数据学习——Linux上常用软件安装
4.1 Linux系统软件安装方式 Linux上的软件安装有以下几种常见方式: 1.二进制发布包 软件已经针对具体平台编译打包发布,只要解压,修改配置即可 2.RPM发布包 软件已经按照redhat的 ...
- Flask--Config研究
导入Flask框架后,在项目跟目录下面会有一个Config.py 文件,里面的默认内容为: class Config(object): pass 可以这Config 类里面定义变量和其他对象 如: c ...
- POJ-Crazy tea party,很好的一道数学题~~~
Crazy tea party Time Limit: 1000MS Memory Limit: 10000K Description n participants of <& ...
- [Istio]流量管理API v1alpha3路由规则
Istio提供一个API进行流量管理,该API允许用户将请求路由到特定版本的服务,为弹性测试注入延迟和失败,添加断路器等,所有这些功能都不必更改应用程序本身的代码.Istio 1.0中引入新的流量管理 ...
- [HNOI2012] 永无乡 题解
题意: n个点,有加边操作,询问与某一点处于相同的联通块的点中权值第k大的点 思路: 对所有点建立一棵权值线段树,加边就配合并查集进行线段树合并 反思: 动态开点,权值线段树要用sum[g[x=fin ...
- 洛谷P1016 旅行家的预算
题目描述 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市(假设出发时油箱是空的).给定两个城市之间的距离D1.汽车油箱的容量C(以升为单位).每升汽油能行驶的距离D2.出发点每升汽油价格P和沿 ...
- [转]制作一个64M的U盘启动盘(mini linux + winpe +dos toolbox)
自己动手定制winpe+各类dos工具箱U盘启动盘+minilinux 由于一个64M老U盘,没什么用,拿来发挥余热.如果U盘够大,可以使用功能更强大的mini linux和带更多工具的winpe.这 ...
- winrar5.0破解
RAR registration data Federal Agency for Education 1000000 PC usage license UID=b621cca9a84bc5deffbf ...