Font Awesome图标字体库的使用

发布时间:2024-9-21 23:03:22 来源:腾巢网络

Font Awesome是一套应用于前端开发的图标【biāo】字体,能和Bootstrap搭配使用【yòng】。通【tōng】过CSS样式可改变【biàn】图标的颜色、大【dà】小阴影等效果,在不同【tóng】终端屏幕上【shàng】完美呈【chéng】现。Font Awesome是完全【quán】免【miǎn】费【fèi】的,无论是个人【rén】还【hái】是【shì】商业组织均可【kě】自由【yóu】使用。

Font Awesome图标字体库的使用

使用前先下【xià】载【zǎi】Font Awesome图标字体库,下【xià】载网址:http://www.bootcss.com/p/font-awesome,这里面【miàn】是Font Awesome 3.0版本,如果要使用最新版本可【kě】以到Font Awesome 中文网一下载。

复制【zhì】Font Awesome的CSS文件和字体放到【dào】指定的项目【mù】目录中【zhōng】;

在<head>闭合【hé】标签内使用link 加载【zǎi】font-awesome.min.css,如:

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

在前端页面中使【shǐ】用时【shí】,都是通过简短的【de】标签<i>添加【jiā】class属于,设置css前缀和图【tú】标字体的具【jù】体名称。

<i class="fa fa-camera-retro"></i>

使用【yòng】 fa-lg (33% 递增), fa-2x, fa-3x, fa-4x, 或 fa-5x可改变【biàn】图标大【dà】小相对于它【tā】们的容器。

<i class="fa fa-camera-retro fa-2x"></i>

使用 fa-fw 来设置【zhì】图标【biāo】在一个固定宽度内,主要【yào】用于【yú】不同宽度【dù】图【tú】标无法对齐的情况,尤其在列表或导航时起到重要作【zuò】用【yòng】。

<i class="fa fa-home fa-fw" aria-hidden="true"></i>

使用 fa-ul and fa-li 轻松的【de】替换无【wú】序列表【biǎo】中的默认图【tú】标。

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>使【shǐ】用【yòng】列表类图标</li>
  <li><i class="fa-li fa fa-check-square"></i>轻松【sōng】的替换</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>无序列表</li>
  <li><i class="fa-li fa fa-square"></i>中的默认图【tú】标</li>
</ul>

使【shǐ】用 fa-spin 使任意图标旋转,还【hái】可以使【shǐ】用 fa-pulse 使【shǐ】其进行【háng】8方位旋转。尤其适合 fa-spinner, fa-refresh, 和 fa-cog。

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><span class="sr-only">Loading...</span>

最新资讯

  1. 2019年乌镇大会,也说说互联网
  2. 响应式网站建设需要准备多少开发预算
  3. CMSJIA介绍
  4. 遵义信息技术服务、WEB软件开发公司
  5. 建设公司网站的作用体现
  6. 品牌保护中域名、商标同等重要
  7. 网站建设哪家公司好
  8. 建设开发手机网站的优势及作用
  9. 我们研究了100个小程序,得出了这些经验!
  10. 公司定制开发网站建设的优势
  11. 移动互联网建站:遵义做网站建设那家公司好
  12. 贵州腾巢网络成功入驻熊掌号,再现移动互联时代新域名