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: ...
随机推荐
- Computer (树形DP)
A school bought the first computer some time ago(so this computer's id is 1). During the recent year ...
- Vim pre-work
1.先学会touch typing盲打是一切的基础 重点在于手眼协调 如果实现不了盲打.一切高效率的Vim操作都将无从做起 2.vim的使用 2.1.hjkl的移动 推荐练习贪吃蛇 和3D平衡球 ...
- SQLSERVER金额转换成英文大写的函数
CREATE FUNCTION [dbo].[f_num_eng] (@num numeric(15,2)) RETURNS varchar(400) WITH ENCRYPTION AS BEGIN ...
- 远程连接mongodb时,27017端口连接不上的解决办法
一.背景描述: 我在linux RED7上安装了mongodb,并没有修改mongodb的配置文件.然后通过另外一台电脑用pymongo连接mongodb时,报错:timeout. ping IP ...
- nagios+logstash实时监控java日志(一)
https://blog.csdn.net/yanggd1987/article/details/64121459
- windows下的asp.net core开发及docker下的发布
参照下面,搭建好开发环境.Docker及配置好Docker加速器 http://www.cnblogs.com/windchen/p/6257846.html 参照下面,将windows共享目录挂载到 ...
- C. Day at the Beach---cf559
http://codeforces.com/problemset/problem/599/C 题目大意: 有n个城堡的高度 让你最多分成几个块 每个块排过序之后 整体是按照升序来的 分析: ...
- 关闭Windows 2003/2008中IE增强的安全配置的方法
在使用Windows Server 2003/2008操作系统时,打开IE浏览网页时,发现浏览器总提示 "是否需要将当前访问的网站添加到自己信任的站点中去",要是不信 ...
- [转]三层架构与MVC之间的区别
我们平时总是将三层架构与MVC混为一谈,殊不知它俩并不是一个概念.下面我来为大家揭晓我所知道的一些真相. 首先,它俩根本不是一个概念. 三层架构是一个分层式的软件体系架构设计,它可适用于任何一个项目. ...
- Registration system
Registration system 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描写叙述 A new e-mail service "Berlandesk&q ...