前端学习_04_font-awesome字体图标
使用font-awesome字体图标库
font-awesome是一个比较大的矢量图标库，包含大部分IT类公司logo和常用的一些小图标，通过使用font-awesome提供的css样式集，可以在网页上轻松地添加图标。由于使用的是字体图标，所以利用文本相关的标签引用，并且放大不会失真。但是和字体不一样的是，如果用<i>标签或者<b>标签等引用的时候，并不会有斜体或者粗体的效果，但是<u>标签却有下划线的效果。在font-awesome官网上找到icon的名字，在引用的元素中添加类：fa和fa-icon名字，在下载的样式集中可以查看到这两个类：
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
图标类则表示了在具体的内容代码。
同时在font-awesome.css中，可以看到有一些扩展的类可以复用，如.pull-right，.pull-left，.fa-ratote-90等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font-awesome test</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<p class="fa fa-2x fa-cart-plus"></p>
<i class="fa fa-border fa-cart-plus"></i>
<b class="fa fa-rotate-90 fa-cart-plus"></b>
<u class="fa fa-pull-right fa-cart-plus"></u>
<em class="fa pull-right fa-cart-plus"></em>
</body>
</html>
以上网页显示为：
可以看到<i><b><em>等标签没有响应效果，<u>标签在图标的下方有下划线产生。
由于将图标当做字体使用，所以当包括在其他块中时，也需要使用字体相关的属性对其进行设置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font-awesome test</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<style>
.icon{
color :white;
background: orange;
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="icon">
<p class="fa fa-2x fa-cart-plus"></p>
</div>
<div>
<i class="fa fa-border fa-cart-plus"></i>
<b class="fa fa-rotate-90 fa-cart-plus"></b>
<b class="fa fa-pull-right fa-cart-plus"></b>
<em class="fa pull-right fa-cart-plus"></em>
</div>
</body>
</html>
如上所示，可以改变其颜色，居中，行高等和字体相关属性，注意的是，fa-2x设置了font-size:2em，所以如果div太小，会出现包裹不住的情况。
前端学习_04_font-awesome字体图标的更多相关文章
- 移动开发基础-学习笔记二-字体图标、less、bootstrap入门
1.字体图标 1.字体图标都是用svg图片 1.svg图片不失真 2.svg图标由设计师提供 3.为了减少网络请求,会把svg图标转换成字体图标,放到字体文件中,通过字体库的方式使用 2.制作步骤 1 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：带有字体图标的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-envelope
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-cloud
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-euro
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-minus
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-plus
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-asterisk
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-play-circle
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- 数据库服务器---Tps
事务处理系统:Transactionprocessingsystems(TPS) 提高事务处理效率与保证其正确性 在数据(信息)发生处将它们记录下来 通过OLTP产生新的信息 将信息保存到数据库中供其 ...
- 深入研究-webkit-overflow-scrolling:touch及ios滚动
1. -webkit-overflow-scrolling:touch是什么? MDN上是这样定义的: -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效 ...
- java web学习笔记 servlet
关于java web web.xml中一般配置的都是与servlet先关的可以配置servlet filter listener context-param用来配置web应用的启动参数,可用通过Ser ...
- 》》css3--动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- C. Kyoya and Colored Balls(Codeforces Round #309 (Div. 2))
C. Kyoya and Colored Balls Kyoya Ootori has a bag with n colored balls that are colored with k diffe ...
- STL之容器适配器stack的实现框架
说明:本文仅供学习交流,转载请标明出处,欢迎转载! 一提到适配器(adapter).我们就想到了早期用电话线上网所用的调制解调器,俗称"猫"."猫"的作用是实现 ...
- 【Access2007】解救被阉割的truncate
Access2007使用被阉割的J-SQL语句,语法跟T-SQL语句.也就是寻常最标准的SQL语句一模一样,但就是仅保留insert into,delete,select,update与没太大意义的过 ...
- UICollectionView具体解释
初始化部分: UICollectionViewFlowLayout *flowLayout= [[UICollectionViewFlowLayout alloc]init]; self.myColl ...
- 最全Pycharm教程（32）——依据FHS在Linux上安装Pycharm
1.主题 怎样在Linux上安装Pycharm,依据FHS. 2.平台要求 Intel Pentium III/800 MHz或更高. 内存最小512M.建议1G以上 屏幕最小分辨率1024x768 ...
- C语言之基本算法37—数组最大值及其位置
//数组运算 /* ================================================================== 题目:查找数组的最大元素,并输出其位置和值! ...