正在加载....
厦门网站建设-世敏网络科技
  • 当前位置: 首页 > 建站百科 > 网站建设
  • 厦门网站建设之Font Awesome图标库应用

    时间:2019-04-20 浏览量:

    当你已经知道 如何开始使用Font Awesome之后, 你就可以用<i>标签包裹起来,用到你网站的任何地方。这里的一些例子也是来自于 Bootstrap文档.

    下面的例子仍然很简单 假如你使用Font Awesome CDN,它提供自动辅助功能的支持。如果你不使用FontAwesome CDN,请参见手动设置可访问性的例子和了解更多关于让你的图标看起来更酷。

     例如: 默认图标fa-camera-retro

    你可以通过设置CSS前缀fa和图标的具体名称,来把Font Awesome 图标放在任意位置。Font Awesome 被设计为用于行内元素(我们喜欢用更简短的<i>标签,它的语义更加精准)。

    <i class="fa fa-camera-retro"></i> fa-camera-retro
    • 例如: 默认图标如果您修改了图标容器的字体大小,图标大小会随之改变。同样也适用于颜色,阴影,阴影等其它任何CSS支持的效果上。

     fa-lg

     fa-2x

     fa-3x

     fa-4x

     fa-5x

    为了增加图标大小相对于它们的容器, 使用 fa-lg (33% 递增), fa-2xfa-3xfa-4x, 或 fa-5x classes.

    <i class="fa fa-camera-retro fa-lg"></i> fa-lg<i class="fa fa-camera-retro fa-2x"></i> fa-2x<i class="fa fa-camera-retro fa-3x"></i> fa-3x<i class="fa fa-camera-retro fa-4x"></i> fa-4x<i class="fa fa-camera-retro fa-5x"></i> fa-5x
    • 如果你的图标顶部和底部被裁剪掉,请确保你有足够的行高。

      首页  关于我们  后台应用编辑  系统设置

    使用 fa-fw 来设置图标在一个固定宽度内,主要用于不同宽度图标无法对齐的情况,尤其在列表或导航时起到重要作用。

    <div class="list-group">
      <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; 首页</a>
      <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; 关于我们</a>
      <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; 后台应用编辑</a>
      <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; 系统设置</a></div>

    …独坐在路边街角 冷风吹醒,默默地伴着我的孤影,只想将结他紧抱,诉出辛酸,就在这刻想起往事,心中一股冲劲勇闯,抛开那现实没有顾虑,仿佛身边拥有一切,看似与别人筑起隔膜。

    使用 fa-border 和 fa-pull-right 或 fa-pull-left 可以轻易构造出引用的特殊效果。

    <i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
    ...独坐在路边街角 冷风吹醒,默默地伴着我的孤影,只想将结他紧抱,诉出辛酸,就在这刻想起往事,心中一股冲劲勇闯,抛开那现实没有顾虑,仿佛身边拥有一切,看似与别人筑起隔膜。

     用fa-spinner来作为加载动画图标 用fa-circle-o-notch来作为加载动画图标 用fa-refresh来作为加载动画图标 用fa-cog来作为加载动画图标用fa-spinner来作为加载动画图标

    使用 fa-spin 使任意图标旋转,还可以使用 fa-pulse 使其进行8方位旋转。尤其适合 fa-spinnerfa-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>

    温馨提示: 动画图标会在一些平台的浏览器中出现抖动的效果,可参见 问题列表#671 中的例子来解决此问题。

    温馨提示: CSS3动画不支持IE8-IE9。

      normal 
      fa-rotate-90 
      fa-rotate-180 
      fa-rotate-270 
      fa-flip-horizontal 
      fa-flip-vertical

    若要对图标进行任意旋转和翻转, 可以使用 fa-rotate-* and fa-flip-* 类.

    <i class="fa fa-shield"></i> normal<br><i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br><i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br><i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br><i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br><i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
     fa-twitter on fa-square-o 
     fa-flag on fa-circle 
     fa-terminal on fa-square 
     fa-ban on fa-camera

    如果想要将多个图标组合起来,使用fa-stack类,作为父容器,fa-stack-1x作为正常比例的图标,fa-stack-2x作为大一些的图标。还可以使用fa-inverse类来切换图标颜色。您可以在父容器中 通过添加 larger icon 类来控制整体大小。

    <span class="fa-stack fa-lg">
      <i class="fa fa-square-o fa-stack-2x"></i>
      <i class="fa fa-twitter fa-stack-1x"></i></span>fa-twitter on fa-square-o<br><span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-flag fa-stack-1x fa-inverse"></i></span>fa-flag on fa-circle<br><span class="fa-stack fa-lg">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-terminal fa-stack-1x fa-inverse"></i></span>fa-terminal on fa-square<br><span class="fa-stack fa-lg">
      <i class="fa fa-camera fa-stack-1x"></i>
      <i class="fa fa-ban fa-stack-2x text-danger"></i></span>fa-ban on fa-camera

     删除  设置

    Font Awesome 
    Version 4.6.3

     用户

    Font Awesome 完全兼容 Bootstrap 的所有组件。

    <a class="btn btn-danger" href="#">
      <i class="fa fa-trash-o fa-lg"></i> Delete</a><a class="btn btn-default btn-sm" href="#">
      <i class="fa fa-cog"></i> Settings</a><a class="btn btn-lg btn-success" href="#">
      <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.6.3</a><div class="btn-group">
      <a class="btn btn-default" href="#">
        <i class="fa fa-align-left" title="左对齐"></i>
      </a>
      <a class="btn btn-default" href="#">
        <i class="fa fa-align-center" title="剧中对齐"></i>
      </a>
      <a class="btn btn-default" href="#">
        <i class="fa fa-align-right" title="右对齐"></i>
      </a>
      <a class="btn btn-default" href="#">
        <i class="fa fa-align-justify" title="平均分布"></i>
      </a></div><div class="input-group margin-bottom-sm">
      <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
      <input class="form-control" type="text" placeholder="您的邮箱地址"></div><div class="input-group">
      <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
      <input class="form-control" type="password" placeholder="请输入密码"></div><div class="btn-group open">
      <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> 用户</a>
      <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="fa fa-caret-down" title="打开下拉菜单"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#"><i class="fa fa-pencil fa-fw"></i> 编辑</a></li>
        <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> 删除</a></li>
        <li><a href="#"><i class="fa fa-ban fa-fw"></i> 屏蔽</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="fa fa-unlock"></i> 锁定管理员</a></li>
      </ul></div>
    加载中~
    加载中~

    您已成功复制微信号,去微信立即添加好友!

    点击下方复制按钮,复制微信号!

    jzm866081

    https://www.xmsmwl.cn
    厦门世敏网络科技有限公司

    点击这里给我发消息
    嘿!有什么能帮到您的吗?