作为web开发者，难免要经常要用到些小图标，给自己web增添几分活力和多样性。像这些：

　　而Font Awesome刚好为我们提供了这些。到目前为止，Font Awesome提供了有500多个可缩放的的矢量图标，并且可以使用css所提供的所有特性对这些图标进行更改，包括：大小、颜色、阴影或者其他任何支持的效果。这些图标基本涵盖了web开发者的基本需求，并且Font Awesome还在不断维护更新，提供新的图标，以供开发者使用。

　　在此，主要介绍一下Font Awesome图标字体的基本使用。

　　到Font Awesome上去下载它的图标字体，我们这里只是用默认css。将font-awesome.min.css引用到自己的页面。

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="./css/font-awesome.min.css">

</head>

　　然后就可以使用Font Awesome为我们提供的500多个图标字体了。

　　首先，实现一个经常表示“首页”的小房子的图标。

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="./css/font-awesome.min.css">

</head>

<body style="background-color:#DBDBDB">

    <i class="fa fa-home"></i> Home

</body>

</html>

　　页面效果：

　　当然图标大小可能不能达到你的要求，那么你可以自己定义大小，或者用Font Awesome提供的几个大小样式类。fa-lg, fa-2x, fa-3x, fa-4x, fa-5x。

    <i class="fa fa-home"></i> 原始大小<br>

    <i class="fa fa-home fa-4x"></i> fa-4x<br>

    <i class="fa fa-home" style="font-size:30px;"></i> 自定义大小-30px

　　页面效果：

　　当然，颜色也是你随心所欲可以设置的。

    <i class="fa fa-home fa-2x"></i> 原始色<br>

    <i class="fa fa-home fa-2x" style="color:#008B00"></i> 草绿色

　　页面效果：

　　也可以将图标旋转下。

    <i class="fa fa-home fa-2x"></i> 原始<br>

    <i class="fa fa-home fa-2x fa-rotate-90"></i> fa-rotate-90<br>

    <i class="fa fa-home fa-2x fa-rotate-180"></i> fa-rotate-180<br>

    <i class="fa fa-home fa-2x fa-rotate-270"></i> fa-rotate-270<br>

    <i class="fa fa-home fa-2x fa-flip-horizontal"></i> fa-flip-horizontal<br>

    <i class="fa fa-home fa-2x fa-flip-vertical"></i> fa-flip-vertical<br>

　　页面效果：

　　font awesome提供了一些类，用于设置图标的固定宽度（fa-fw），用于列表模式（fa-ul 和 fa-li），边框与对齐（fa-ul 和 fa-li）以及图标的组合使用，比如空白的边框中添加其他图标。详细点我。

　　这里我们重点介绍下图标的动画使用。font awesome提供了fa-spin和fa-pulse两个类实现图标动画效果，主要适用于适合旋转的图标。

    <i class="fa fa-spinner fa-2x fa-spin"></i>

    <i class="fa fa-circle-o-notch fa-2x fa-spin"></i>

    <i class="fa fa-refresh fa-2x fa-spin"></i>

    <i class="fa fa-cog fa-2x fa-spin"></i>

    <i class="fa fa-spinner fa-2x fa-pulse"></i>

　　页面效果：

　　当然，我们可以自己定义一些样式用于控制图标的动画效果。这里我们引入自己定义的css样式my.css。

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="./css/font-awesome.min.css">

    <link rel="stylesheet" href="./css/my.css">

</head>

<body style="background-color:#DBDBDB">

    <div style="padding-left:100px; padding-top:200px;">  &nbsp;

        <i class="fa fa-envelope fa-2x icon-animated-vertical"></i> &nbsp;

        <i class="fa fa-hand-o-right fa-2x icon-animated-hand-pointer"></i> &nbsp;

        <i class="fa fa-bell fa-2x icon-animated-bell"></i> &nbsp;

        <i class="fa fa-wrench fa-2x icon-animated-wrench"></i>

    </div>

</body>

</html>

　　网页效果：

　　这里抛砖引玉，大家可以根据自己的需要，来定义自己的css。让自己的web开发更炫酷。

　　文中的自定义样式my.css可以点这里下载。以上。

　　

Font Awesome图标字体应用及相关的更多相关文章

  1. Font Awesome:图标字体，完全CSS控制

    Font Awesome是一种web font,它包含了几乎所有常用的图标,比如Twitter.facebook等等.用户可以自定义这些图标字体,包括大小.颜色.阴影效果以及其它可以通过CSS控制的属 ...

  2. font awesome (图标字体库)

    Font Awesome fa是什么? 图标字体库和CSS框架 怎么用? <link rel="stylesheet" href="https://cdn.boot ...

  3. Font Awesome图标字体库（2015年05月25日）

    Font Awesome是一款非常棒的字体图标工具,给个地址,具体的自已慢慢去体会,只能帮你到这儿了...... http://fortawesome.github.io/Font-Awesome/ ...

  4. Font Awesome图标字体

    1.unicode unicode是字体在网页端最原始的应用方式,特点是: 兼容性最好,支持ie6+,及所有现代浏览器. 支持按字体的方式去动态调整图标大小,颜色等等. 但是因为是字体,所以不支持多色 ...

  5. CSS网页使用Font Awesome图标字体时，css定义 content 属性

    原文地址: http://blog.csdn.net/laurel_y/article/details/70842157

  6. 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例

     1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...

  7. IconMoon图标字体制作

    官网:https://icomoon.io/ 点击右上角“IconMoon APP” 点击左上角“import Icons”按钮 选中小图标 - 选择右下角“Generate Font”生成图标字体 ...

  8. 01_MUI之Boilerplate中：HTML5演示样例，动态组件，自己定义字体演示样例，自己定义字体演示样例，图标字体演示样例

     1安装HBuilder5.0.0,安装后的界面截图例如以下: 2 依照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上 ...

  9. 如何应用Font Awesome矢量字体图标

    Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库.这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外, ...

随机推荐

  1. C++set 和 multiset的使用

    最后一个自由支配的暑假,学一些自己感兴趣的部分,也算为大三作准备. C++中set集合的使用 定义一个int类型的集合 set<int> s: set<int>::iterat ...

  2. 网页布局——grid语法属性详解

    grid目前兼容性目前还可以,主流浏览器对它的支持力度很大,ie9,10宣布它未来不久会对它有很好的支持,目前则需要使用过时的语法.我相信不久的将来grid将成为每一个前端工作人员必备的布局技能. 属 ...

  3. 用 Python 爬取网易严选妹子内衣信息，探究妹纸们的偏好

    网易商品评论爬取 分析网页 评论分析 进入到网易精选官网,搜索“文胸”后,先随便点进一个商品. 在商品页面,打开 Chrome 的控制台,切换至 Network 页,再把商品页Python入门到精通学 ...

  4. kettle 利用 HTTP Client 获取猫眼电影API近期上映相关信息，并解析json

    前言 Kettle 除了常规的数据处理之外,还可以模拟发送HTTP client/post ,REST client. 实验背景 这周二老师布置了一项实验: 建立一个转换,实现一个猫眼API热映电影的 ...

  5. 基于STM32F1与NRF24L01模块的SPI简单通信

    一.前言 1.简介: 本文是基于STM32F1,将数据发送至NRF模块的寄存器,并将数据重新读取,通过串口发送出来的简单SPI单通信. 2.SPI简介: 调过STM8的都已经对SPI有所了解,调法都一 ...

  6. C#学习--Oracle数据库基本操作（连接、增、删、改、查）封装

    写在前面: SQLserver的C#封装:https://www.cnblogs.com/mexihq/p/11636785.html 类似于上篇有关SQLserver的C#封装,小编对Oracle数 ...

  7. 算法学习之剑指offer（一）

    题目一: 题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 思路1:遍历 ...

  8. 阿里terway源码分析

    背景 随着公司业务的发展,底层容器环境也需要在各个区域部署,实现多云架构, 使用各个云厂商提供的CNI插件是k8s多云环境下网络架构的一种高效的解法.我们在阿里云的方案中,便用到了阿里云提供的CNI插 ...

  9. Python_散点图绘制

    为了可视化一些数据分布,需要以散点图的形式呈现 引入绘图工具 import matplotlib.pyplot as plt from matplotlib.font_manager import F ...

  10. Mobius 反演与杜教筛

    积性函数 积性函数 指对于所有互质的整数 aaa 和 bbb 有性质 f(ab)=f(a)f(b)f(ab)=f(a)f(b)f(ab)=f(a)f(b) 的数论函数. 特别地,若所有的整数 aaa ...