使用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. Java Random介绍

    一.简介 Random类位于java.util包下,此类的实例用于生成伪随机数流.之所以称之为伪随机,是因为真正意义上的随机数(或者称为随机事件)在某次产生过程中是按照实验过程表现的分布概率随机产生的 ...

  2. 小白的Python之路 day1 模块初识

    模块初识 Python的强大之处在于他有非常丰富和强大的标准库和第三方库,几乎你想实现的任何功能都有相应的Python库支持,以后的课程中会深入讲解常用到的各种库,现在,我们先来象征性的学2个简单的. ...

  3. 班级博客客户端Beta阶段发布说明

    班级博客客户端Beta阶段发布说明 NewTeam 2017/12/18 项目 博客园班级博客Android客户端 目录 发布方式和发布地址 新功能 修复的缺陷 对运行环境的要求 安装方法 已知的问题 ...

  4. 什么是BSD？

       BSD (Berkeley Software Distribution,伯克利软件套件)是Unix的衍生系统,1970年代由加州大学伯克利分校开创.BSD用来代表由此派生出的各种套件集合. BS ...

  5. springMVC(1)---获取前段数据

    springMVC(1)---获取前段数据 首先说明,如果你学过Struts2,那么在学springMVC就会简单很多,我也不最基础的开始写了,我前篇文章搭建了个ssm框架,算是springmvc入门 ...

  6. OJ随笔——【1102-海明距离】——位运算

    题目如下: Description 海明距离是在指二进制情况下,一个整数变成另外一个整数需要翻转的位数.比如2转换到3需要翻转1位,所以2到3的海明距离是1.给你两个正整数x和y,(x,y<=1 ...

  7. OpenCV基础篇之查找表

    程序及分析 /* * FileName : lookup_table.cpp * Author : xiahouzuoxin @163.com * Version : v1.0 * Date : Su ...

  8. 通过c# 实现mysql 数据库的备份和附加

    近期涉及到通过c# 对mysq数据库的备份和附件功能 由于mysql 有类似的备份和附加的cmd命令.可是一直没用过,今天实践了下,感觉效率挺快.比自己写的效率高.以下我列出c#调用mysql的备份和 ...

  9. 在Visual Studio Code中开发Office Add-in

    作者:陈希章 发表于 2017年7月13日 上一篇 我介绍了如何在Visual Studio中开发Office Add-in,因为有标准的项目模板,一系列配套的工具,尤其是自带的一键调试功能,可以让开 ...

  10. 如何处理使用js兼容所有浏览器的问题

    首先:如何处理兼容问题 1.如果两个都是属性,用逻辑||做兼容 2.如果有一个是方法,用三元做兼容 3.如果是多个属性或方法,封装函数做兼容 分享两个小知识点: 1.取消拖拽的默认行为: docume ...