Font Awesome图标字体应用及相关
作为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;">
<i class="fa fa-envelope fa-2x icon-animated-vertical"></i>
<i class="fa fa-hand-o-right fa-2x icon-animated-hand-pointer"></i>
<i class="fa fa-bell fa-2x icon-animated-bell"></i>
<i class="fa fa-wrench fa-2x icon-animated-wrench"></i>
</div>
</body>
</html>
网页效果：
这里抛砖引玉，大家可以根据自己的需要，来定义自己的css。让自己的web开发更炫酷。
文中的自定义样式my.css可以点这里下载。以上。
Font Awesome图标字体应用及相关的更多相关文章
- Font Awesome:图标字体，完全CSS控制
Font Awesome是一种web font,它包含了几乎所有常用的图标,比如Twitter.facebook等等.用户可以自定义这些图标字体,包括大小.颜色.阴影效果以及其它可以通过CSS控制的属 ...
- font awesome (图标字体库)
Font Awesome fa是什么? 图标字体库和CSS框架 怎么用? <link rel="stylesheet" href="https://cdn.boot ...
- Font Awesome图标字体库（2015年05月25日）
Font Awesome是一款非常棒的字体图标工具,给个地址,具体的自已慢慢去体会,只能帮你到这儿了...... http://fortawesome.github.io/Font-Awesome/ ...
- Font Awesome图标字体
1.unicode unicode是字体在网页端最原始的应用方式,特点是: 兼容性最好,支持ie6+,及所有现代浏览器. 支持按字体的方式去动态调整图标大小,颜色等等. 但是因为是字体,所以不支持多色 ...
- CSS网页使用Font Awesome图标字体时，css定义 content 属性
原文地址: http://blog.csdn.net/laurel_y/article/details/70842157
- 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例
1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...
- IconMoon图标字体制作
官网:https://icomoon.io/ 点击右上角“IconMoon APP” 点击左上角“import Icons”按钮 选中小图标 - 选择右下角“Generate Font”生成图标字体 ...
- 01_MUI之Boilerplate中：HTML5演示样例，动态组件，自己定义字体演示样例，自己定义字体演示样例，图标字体演示样例
1安装HBuilder5.0.0,安装后的界面截图例如以下: 2 依照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上 ...
- 如何应用Font Awesome矢量字体图标
Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库.这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外, ...
随机推荐
- .NET进阶篇-丑话先说，Flag先立
作为开发者,工作了几年,也总觉得技术栈和刚毕业区别不大,用的技术还都是N年前的,每每看到新东西,也只心里哇塞惊叹一下,然后就回归于忙碌.怪自己的技术池太浅,热门的令人称奇的技术也都是在其他巨人的肩膀上 ...
- Hyper-V安装CentOS 8问题
CentOS 8 已经发布很长时间了,作为一直折腾Linux虚拟机的一员怎么少的了我. 环境&准备工作 系统:Win 10 pro 19H1 虚拟机:Hyper-V ISO:CentOS 8 ...
- IDEA 学习笔记之 Spark/SBT项目开发
Spark/SBT项目开发: 下载Scala SDK 下载SBT 配置IDEA SBT:(如果不配置,就会重新下载SBT, 非常慢,因为以前我已经下过了,所以要配置为过去使用的SBT) 新建立SBT项 ...
- JVM(四)类加载机制
1.静态绑定和动态绑定 静态绑定:即前期绑定,在程序执行前方法已经被绑定,此时由编译器或者其他连接程序实现,针对Java,可以理解为编译期的绑定,java中只有final.static.private ...
- 【原创】go语言学习（二）数据类型、变量量、常量量
目录 1.标识符.关键字2. 变量量和常量量3. 数据类型4. Go程序基本结构 标识符.关键字 1.标识符是⽤用来表示Go中的变量量名或者函数名,以字⺟母或_开头.后⾯面跟着字⺟母 ._或数字2. ...
- package.json详解
1.概念 Node.js项目遵循模块化的架构,当我们创建了一个Node.js项目,意味着创建了一个模块,这个模块的描述文件,被称为package.json 亦即:模块的描述文件 = package.j ...
- 【JavaScript】使用纯JS实现多张图片的懒加载（附源码）
一.效果图如下 上面的效果图,效果需求如下 1.还没加载图片的时候,默认显示加载图片背景图 2.刚开始进入页面,自动加载第一屏幕的图片 3.下拉界面,当一张图片容器完全显露出屏幕,即刻加载图片,替换背 ...
- aiohttp的安装
之前介绍的requests库是一个阻塞式HTTP请求库,当我们发出一个请求后,程序会一直等待服务器响应,知道得到响应后,程序才会进行下一步处理.其实,这个过程比较耗时.如果程序可以在这个等待过程中做一 ...
- SpringCloud教程二:Ribbon(Finchley版)
在上一篇文章,讲了服务的注册和发现.在微服务架构中,业务都会被拆分成一个独立的服务,服务与服务的通讯是基于http restful的.Spring cloud有两种服务调用方式,一种是ribbon+r ...
- Struts2:搭建原理
记录下,struts2的搭建过程: 1核心jar包: struts-2.1.8\apps\struts2-blank-2.1.8.war 解压后 在struts2-blank-2.1.8\WEB-IN ...