Font Awesome图标字体应用及相关

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

Font Awesome图标字体应用及相关

  而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图标字体应用及相关

  当然图标大小可能不能达到你的要求,那么你可以自己定义大小,或者用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

  页面效果:Font Awesome图标字体应用及相关

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

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

  页面效果:Font Awesome图标字体应用及相关

  也可以将图标旋转下。

    <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图标字体应用及相关

  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>

  页面效果:Font Awesome图标字体应用及相关

  当然,我们可以自己定义一些样式用于控制图标的动画效果。这里我们引入自己定义的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>

  网页效果:Font Awesome图标字体应用及相关

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

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

  

上一篇:将Mat类型坐标数据生成pts文件


下一篇:linux安装python