Font Awesome图标字体应用及相关
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Font Awesome图标字体应用及相关，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3238字，纯文字阅读大概需要5分钟。
内容图文
作为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可以点这里下载。以上。
原文：http://www.cnblogs.com/chenxl/p/4412605.html
内容总结
以上是互联网集市为您收集整理的Font Awesome图标字体应用及相关全部内容，希望文章能够帮你解决Font Awesome图标字体应用及相关所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。