搜索到
1
篇与
Font Awesome
的结果
-
Font Awesome 图标字体使用教程 Font Awesome Font Awesome 是为 Twitter Bootstrap 设计的图标字体，通过Web Font的方式来显示一些图标，好处是图标可以被任意缩放、改变颜色，你需要做的只是像修改文字样式那样修改图标样式，现在非常多的网站还有博客都是使用的这套图标。 基本使用1.在站点的在head处引入官方的font-awesome.min.css<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 2.其他博客或者网站就在你的header头部引入就可以了 3.Handsome主题直接在：设置外观-开发者设置-自定义输出header头部的HTML代码 4.引入完成，就去这个图标库里去找你想要的图标 图标库 然后复制下来这串代码，然后就可以把这个 i 标签放在任何位置。 5.举个栗子 比如我要在我博客右侧的统计信息评论前面加上这个图标，就找到这个部分的源码，然后找合适的位置粘贴进去就行，当然也可以直接在现有的class里去添加，在现有的class添加就只用 “fa fa-grav” 就可以了，如果要替换现有的图标直接在现有的class修改 进阶使用下面是一些参数使用方法，如放大，翻转，动态等，使用的时候直接在基础用法的后面加参数，详情请看代码部分 1.图标放大，为了增加图标大小相对于它们的容器，使用fa-lg（33％递增） fa-2x， fa-3x，fa-4x或fa-5x类。 fa-lg fa-2x fa-3x fa-4x fa-5x<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 2.旋转并翻转，若要对图标进行任意旋转和旋转，可以使用fa-rotate和fa-flip-类 normal fa-rotate-90 fa-rotate-180 fa-rotate-270 fa-flip-horizontal fa-flip-vertical<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 3.组合图标，如果想要将多个图标组合起来，使用fa-stack类，作为父容器，fa-stack-1x作为正常比例的图标，fa-stack-2x作为大一些的图标。还可以使用fa-inverse类来切换图标颜色，在父容器中通过添加更大的图标类来控制整体大小。fa-twitter on fa-square-o fa-flag on fa-circle fa-terminal on fa-square fa-ban on fa-camera<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 4.动态图标，先引入一个css动画，引入方式和上面一样。使用这个CSS动画来实现动态图标，使用fa-spin使任意图标种植旋转，可以还使用fa-pulse使其进行方位旋转<link rel="stylesheet" href="https://itggg.bj.bcebos.com/cdn/font-awesome-animation.min.css"> 旋转类Loading...Loading...Loading...Loading...Loading...<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> 其他13种动画效果，序号请参照下方代码1. | 2. | 3. | 4. | 5. | 6. | 7.8. | 9. | 10.11. | 12. | 13.<i class="fa fa-wrench faa-wrench animated fa-3x"></i> <i class="fa fa-bell faa-ring animated fa-3x"></i> <i class="fa fa-envelope faa-horizontal animated fa-3x"></i> <i class="fa fa-thumbs-up faa-vertical animated fa-3x"></i> <i class="fa fa-exclamation-triangle faa-flash animated fa-3x"></i> <i class="fa fa-thumbs-up faa-bounce animated fa-3x"></i> <i class="fa fa-plane faa-float animated fa-3x"></i> <i class="fa fa-heart faa-pulse animated fa-3x"></i> <i class="fa fa-trophy faa-tada animated fa-3x"></i> <i class="fa fa-space-shuttle faa-passing animated fa-3x"></i> <i class="fa fa-space-shuttle faa-passing-reverse animated fa-3x"></i> <i class="fa fa-circle faa-burst animated fa-3x"></i> <i class="fa fa-star faa-falling animated fa-3x"></i> 鼠标点击动态，修改默认的动态参数 animated参数说明：animated 循环动态 animated-hover 鼠标移动到图标上动态 效果演示：移动鼠标到图标上 | <i class="fas fa-bell faa-ring animated-hover"></i> <i class="fas fa-spinner faa-spin animated-hover"></i> 怎么样？你学会了吗？ 本文转自:Flat tire Blog
