使用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字体图标的更多相关文章

  1. 移动开发基础-学习笔记二-字体图标、less、bootstrap入门

    1.字体图标 1.字体图标都是用svg图片 1.svg图片不失真 2.svg图标由设计师提供 3.为了减少网络请求,会把svg图标转换成字体图标,放到字体文件中,通过字体库的方式使用 2.制作步骤 1 ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：带有字体图标的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-envelope

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-cloud

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-euro

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-minus

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-plus

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-asterisk

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-play-circle

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. Laravel 框架安装

    Composer 在命令行执行 create-project 来安装 Laravel:就是下面这一句话就OK了!composer create-project laravel/laravel --pr ...

  2. Lucene.net(4.8.0)+PanGu分词器问题记录一:分词器Analyzer的构造和内部成员ReuseStategy

    前言:目前自己在做使用Lucene.net和PanGu分词实现全文检索的工作,不过自己是把别人做好的项目进行迁移.因为项目整体要迁移到ASP.NET Core 2.0版本,而Lucene使用的版本是3 ...

  3. Java调用PDFBox打印自定义纸张PDF

    打印对象 一份设置为A3纸张, 页面边距为(10, 10, 10, 10)mm的PDF文件. PageFormat 默认PDFPrintable无法设置页面大小. PDFPrintable print ...

  4. 团队合作-如何避免JS冲突

    解决JS冲突的演化过程 1.用匿名函数将脚本包裹起来,可以有效控制全局变量,避免冲突隐患 (function(){})(): 2.定义一个全局作用域的变量str,可以帮助我们在不同匿名函数间通信 严格 ...

  5. SpringBoot多数据源配置

    准备环境: jdk1.8 eclipse tomcat8.0 第一步:在配置文件添加如下信息: spring.datasource.primary.url=jdbc:mysql://localhost ...

  6. extr_shopping

    __author__ = 'ZZG' # noinspection PyCallingNonCallable shopping_list =[ ("iphone",5300), ( ...

  7. 使用java类破解MyEclipse

    今天在网上查资料的时候无意中发现使用java类破解MyEclipse的注册码问题.跟大家分享一下 1.建立JAVA Project,随便命名,只要符合规则就行 2.在刚刚建好的Project右击src ...

  8. [睡前灵感and发散思维]由一个简单的数组比较问题而想到的

    前言 据说,一只优秀的程序猿往往会有这样的经历,白天遇到一个绞尽脑汁也无法解决的问题,晚上睡了后,半夜在梦中会灵感涌现,立马起床,打开电脑,一气呵成.第二天如果不看注释,完全不知道自己找到了如此巧妙地 ...

  9. keeplived日志位置指定

    作为一个运维DBA,除了关心数据库的关键指数.还得往架构和底层基础知识多靠拢. 2010年刚工作的时候,那会Cacti监控比較流行吧.可恶的是SNMP会把默认日志写到系统日志文件中面,导致排错时非常受 ...

  10. ORA-16032: parameter LOG_ARCHIVE_DEST_3 destination string cannot be translated问题处理过程

    1,现象是oracle启动报错例如以下: SQL> startup ORA-16032: parameter LOG_ARCHIVE_DEST_3 destination string cann ...