前端学习_04_font-awesome字体图标
2015-04-23 21:13
603 查看
使用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太小,会出现包裹不住的情况。
相关文章推荐
- 学习WPF——使用Font-Awesome图标字体
- 在web.config文件中,增加“type="APP.Modules.CommandModule,CommandModules"”节点会导致awesome font字体图标显示为方框框
- iconfont字体图标的使用方法--超简单! 我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以
- 在SVG中使用Bootstrap或FontAwesome图标字体
- Font Awesome 完美的图标字体
- Android调用font-awesome字体图标
- web前端程序猿的福音----使用font-awesome代替icon小图标
- Axure安装FontAwesome字体图标
- Font Awesome-为Bootstrap设计的图标字体
- Font Awesome 4.0.3 字体图标完美兼容IE7
- RN(react native)入坑指南-05,使用图标字体Fontawesome
- 如何在Axure中使用FontAwesome字体图标
- 如何在angular2中引用FontAwesome字体中的图标?
- 创建自定义字体图标-追加自定义图标到Bootstrap或者font Awesome中
- Font Awesome 4.0.3 字体图标完美兼容IE7
- element-ui中使用font-awesome字体图标
- FontAwesome 奥森图标的学习
- Font Awesome:图标字体,完全CSS控制
- Font-Awesome 强大的字体图标
- 字体图标font-awesome