使用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. php常用面试题

    1. 有一列数的规则如下 1.1.2.3.5.8.13.21.34... 求第30位数是多少.写出相关函数和算法名称 //$pxx = array(1,1);//for($i=2;$i<=29; ...

  2. mshta 反弹shell

    kali系统准备: 复制以下ruby代码到/usr/share/metasploit-framework/modules/exploits/windows/smb/msh_shell.rb目录(要注意 ...

  3. UWP 调用outlook邮箱反馈

    public static async Task FeedbackAsync(string address, string subject, string body) { if (address == ...

  4. Python搭建Web服务器，与Ajax交互，接收处理Get和Post请求的简易结构

    用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...

  5. NGUI_Input

    九.输入框Input 1.凡是用户可以输入文本的地方,几乎都用输入框,有登录账号和密码.输入角色名称.输入聊天内容 2.手动拼接输入框,拖动预制体的就不再说了 (1).创建一个Sprite作为输入框的 ...

  6. Java----list常用方法汇总

    package ListTest; import java.util.ArrayList; import java.util.Iterator ; import java.util.List; /** ...

  7. get和post提交数据的差别

    form表单提交,默认method = "get",所以你在提交数据的时候,最好将此參数指定为method = "post",否则你在提交大数据的时候,可能会出 ...

  8. Android View动画效果—透明效果，旋转效果（二）

    一:动画效果 方法一:动画效果用AlphaAnimation类.直接加入 AlphaAnimation aa = new AlphaAnimation(0,1); //设置透明度 aa.setDura ...

  9. java开发收藏

    一.java工具 1.jenkins 项目集成工具 2.launch4j java打包成exe工具 二.json库 1.jsoniter 比以下都快 2.dsljson 3.fastjson 4.gs ...

  10. springboot(十五)：springboot+jpa+thymeleaf增删改查示例

    这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个demo来试试它的效果,越简单越容易上 ...