Bootstrap font-awesome 图标库最强指南来啦!!!

注重版权,若要转载烦请附上作者和链接

作者:Joshua_yi

链接:https://blog.csdn.net/weixin_44984664/article/details/106393113

文章目录

      • 先上效果图:
      • 一、开始瞎逼逼
      • 二、基本图标
      • 三、具体使用
        • (一) 引入相应的css
          • 1、使用BoostrapCDN
          • 2、将font-awesome.css文件下载下来自己引入
        • (二)开始使用
          • 1、无脑引用
          • 2、放大图标
          • 3、固定宽度
          • 4、用于列表
          • 5、边框与对齐
          • 6、动画
          • 7、旋转与翻转
          • 8、组合使用
          • 9、添加颜色
      • 四、总结



先上效果图:

Bootstrap font-awesome 图标库最强指南来啦!!!_第1张图片

一、开始瞎逼逼

我们在进行网页设计的时候常常要用到一些图标,而
强大的Boostrap font-awesome已经为我们设计了许多常用的图标
这就非常nice了~~
Bootstrap font-awesome 图标库最强指南来啦!!!_第2张图片
Font Awesome 4官网入口
https://fontawesome.dashgame.com/#spinning
Bootstrap font-awesome 图标库最强指南来啦!!!_第3张图片
现在已经出来了Font Awesome 5了

入口
https://fa5.dashgame.com/#/
Bootstrap font-awesome 图标库最强指南来啦!!!_第4张图片
Bootstrap font-awesome 图标库最强指南来啦!!!_第5张图片
下面我就简单介绍一下怎么使用这个吧

二、基本图标

font-awesome 4的图标大致可以分为以下几类

  • 网页
  • 辅助功能
  • 手势
  • 运输
  • 性别
  • 文件类型
  • 可旋转
  • 表单
  • 支付
  • 图表
  • 货币
  • 文本编辑
  • 指示方向
  • 视频播放
  • 标志
  • 医疗

而在font-awesome 5中,图标的数量和质量有有了非常大的提升
咱这里阔以简单看一下

Bootstrap font-awesome 图标库最强指南来啦!!!_第6张图片

同时在font-awesome 5中也加了非常多的细节

Bootstrap font-awesome 图标库最强指南来啦!!!_第7张图片
d=====( ̄▽ ̄*)b


在最新版中也加入了专业版的图标
说白了不就是收费
看一下价格
Bootstrap font-awesome 图标库最强指南来啦!!!_第8张图片
……有点小贵

不过网页上也有一些下载资源,应该比直接付费的强些

https://download.csdn.net/download/zeroonewfy/11226287?utm_medium=distribute.pc_relevant_download.none-task-download-BlogCommendFromBaidu_2-3.nonecase&depth_1-utm_sourcedistribute.pc_relevant_download.none-task-download-BlogCommendFromBaidu_2-3



  • 5的专业版入口
  • 专业版文档

但是平时免费的对于像我这样的菜鸡新手来说应该是够用了,大佬请移步官方文档


具体的图标大家阔以到官网上查看

温馨提示配合上ctrl+f 查找图标更香哦
Bootstrap font-awesome 图标库最强指南来啦!!!_第9张图片
下面仅以少量图标作为演示,怎么将其添加到咱们的网页中叭


三、具体使用

5的改动较大
但和4的用法上还是有些许相似之处
具体用法阔以参考5的文档和4的官网

Bootstrap font-awesome 图标库最强指南来啦!!!_第10张图片
Bootstrap font-awesome 图标库最强指南来啦!!!_第11张图片
Bootstrap font-awesome 图标库最强指南来啦!!!_第12张图片

5的官方文档已经非常详细了,我这里不再赘述,阔以先大体看一下有哪些功能
Bootstrap font-awesome 图标库最强指南来啦!!!_第13张图片
Bootstrap font-awesome 图标库最强指南来啦!!!_第14张图片
Bootstrap font-awesome 图标库最强指南来啦!!!_第15张图片
下面仅以4作为介绍

(一) 引入相应的css

在4中只介绍常用的也是最为简单的两种方式,其他的方式请参照官网示例

1、使用BoostrapCDN

直接在head标签里写入

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Bootstrap font-awesome 图标库最强指南来啦!!!_第16张图片

2、将font-awesome.css文件下载下来自己引入

还是在head标签里写入

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

路径改成自己的就阔以啦

(二)开始使用

1、无脑引用

我们几乎可以将Font Awesome图标使用在几乎任何地方,只需要使用前缀 fa ,再加上图标名称就阔以啦。
比如
Bootstrap font-awesome 图标库最强指南来啦!!!_第17张图片

 <div class="col-md-5">
    <h3 class="col-header-title text-success"><i class="fa fa-user-circle-o">i> About meh3>
    <p>{{ info.brief_info }}p>
div>

这个图标的名称叫user-circle-o
我们用的时候只需要加上fafa-就阔以啦

2、放大图标

我们还阔以将图标进行放大
使用 fa-lg (33%递增)、fa-2xfa-3xfa-4x,或者 fa-5x类 。

效果
Bootstrap font-awesome 图标库最强指南来啦!!!_第18张图片

<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
3、固定宽度

使用 fa-fw可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。
Bootstrap font-awesome 图标库最强指南来啦!!!_第19张图片

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw">i>  Homea>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw">i>  Librarya>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw">i>  Applicationsa>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw">i>  Settingsa>
div>
4、用于列表

使用 fa-ulfa-li 便可以简单的将无序列表的默认符号替换掉。
Bootstrap font-awesome 图标库最强指南来啦!!!_第20张图片

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square">i>List iconsli>
  <li><i class="fa-li fa fa-check-square">i>can be usedli>
  <li><i class="fa-li fa fa-spinner fa-spin">i>as bulletsli>
  <li><i class="fa-li fa fa-square">i>in listsli>
ul>
5、边框与对齐

使用 fa-border 以及 pull-rightpull-left 可以轻易构造出引用的特殊效果。
Bootstrap font-awesome 图标库最强指南来啦!!!_第21张图片

<i class="fa fa-quote-left fa-3x pull-left fa-border">i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
6、动画

使用 fa-spin类来使任意图标旋转,现在还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinnerfa-refreshfa-cog

Bootstrap font-awesome 图标库最强指南来啦!!!_第22张图片
Bootstrap font-awesome 图标库最强指南来啦!!!_第23张图片
官网上的例子
Bootstrap font-awesome 图标库最强指南来啦!!!_第24张图片

<i class="fa fa-spinner fa-spin">i>
<i class="fa fa-circle-o-notch fa-spin">i>
<i class="fa fa-refresh fa-spin">i>
<i class="fa fa-cog fa-spin">i>
<i class="fa fa-spinner fa-pulse">i>
7、旋转与翻转

使用 fa-rotate-*fa-flip-* 类可以对图标进行任意旋转和翻转。
Bootstrap font-awesome 图标库最强指南来啦!!!_第25张图片

<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> icon-flip-vertical
8、组合使用

如果想要将多个图标组合起来,使用 fa-stack 类作为父容器,fa-stack-1x 作为正常比例的图标,fa-stack-2x 作为大一些的图标。还可以使用 fa-inverse类来切换图标颜色。您可以在父容器中 通过添加 大图标 类来控制整体大小。
Bootstrap font-awesome 图标库最强指南来啦!!!_第26张图片

<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

有了这个的功能之后咱就阔以设计自己的组合图标啦
d=====( ̄▽ ̄*)b

9、添加颜色

当然我们也可以为图标添加具体的颜色和其他css样式
在这里插入图片描述

<tr>
<td class="td1"><i class="fa fa-weixin" style="color: #00bc8c">i>td>
<td>{{ info.wechat }}td>
tr>

是不是很高大上

四、总结

以上展示了Bootstrap font-awesome 4 的图标的基本使用方法
以及提及了一些5中的用法

当然除了这些还有许多的其他类型的icon可以供我们使用
比如阿里的图标库也很不错
https://www.iconfont.cn

如果小伙伴们有好的图标库,欢迎评论留言鸭~~

如果觉得本文对各位大大有帮助的话,请给小编一个三连叭~~~
Bootstrap font-awesome 图标库最强指南来啦!!!_第27张图片

你可能感兴趣的:(web开发)