如何应用Font Awesome矢量字体图标

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外,还有社交网络图标、Web 应用程序图标和编辑器图标等等,可以免费用于商业项目。

可以到官方站点查看更详细的信息和使用样例。

下面仅记录使用步骤:

1.到官网上下载最新版本的Font Awesome.

2.解压文件,将其中的css和fonts文件夹拷贝到项目中,其中css文件夹中有两个css文件(font-awesome.css和font-awesome.min.css),fonts下有有5个,如下:

3.在需要使用的html或者其它类型的页面中引入样式文件,如下:

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

4.查看font-awesome.css文件,如果引用的是压缩版的,就要查看那个文件了,打开文件看到第一个样式定义如下:

@font-face {
  
font-family: 'FontAwesome';
  
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  
font-weight: normal;
  
font-style: normal;

}

一定注意其中的src:url()中的路径是不是当前与当前项目的实际路径向匹配。

4.最后在页面中加入相应的html元素,并且按照font awesome定义好的样式为需要添加矢量图标的元素指定样式。:

<div class="list-group">
        <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
        <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
        <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
        <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
    </div>
    <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-car"></i>
    <i class="fa fa-car fa-3x"></i>

另外,font awesome 和BootStrap结合可以达到更好的效果。

上面的html工作效果如下:

测试demo下载地址:进入下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏社区的朋友们

3D 图形学基础 (下)

本文主要针对一些对3D有兴趣的同学,普及图形学知识,不涉及深入的技术探讨和样例介绍。对于不是从事相关开发的同学也能了解相关的知识。

1K10
来自专栏Thinks

带你轻松打开svg滤镜的大门

上次和大家一起,用最简单直白,轻松粗暴的方式学习了一遍SVG动画,这次我们再一起来搞点不一样的东西,SVG滤镜的实现。

21320
来自专栏汪铖杰的专栏

一篇文章搞懂人脸识别的十个概念

笔者整理了一些常见人脸技术的基本概念,主要用于帮助非基础研究读者对人脸相关技术有一个更深入的了解,方便后续的交流与合作。

6.3K30
来自专栏云社区全球资讯抢先看

新的算法将一键修复损坏的数字图像

技术可以使用人工神经网络的力量来一次处理单个图像中的多种类型的图像噪点和图像模糊。

22120
来自专栏腾讯架构师的专栏

FPGA : 用“芯”做图

图像的压缩,从本质上是通过提高计算算力来降低存储和带宽。同时更加复杂的算法也带来计算算力的大量消耗和处理延时的增加。

93620
来自专栏腾讯AI实验室的专栏

一篇看懂 CVPR 2017 五大研究前沿

我们将深度解析本届CVPR热门研究,包括低中层视觉、图像描述生成、3D视觉、计算机视觉与机器学习、弱监督下的图像识别等。

2.5K50
来自专栏熊整文的专栏

艺术二维码生成原理和实践

二维码现在是大街小巷的标配设计,只要用手机扫一下就能快速的进入相应的页面,可以跳转到相应页面,或是查看名片、付款、收红包等等。本文依据二维码的生成原理,用艺术图...

3.7K10
来自专栏聊high云的专栏

聊一聊全景图

基于 ThreeJS 实现全景图的注意事项,以及球型全景图转为立方体全景图工具的 WebGL 实现和相关推导过程。

1.4K00
来自专栏蒋心为的专栏

基于深度学习的图像真实风格迁移

本文详细讲解论文“ Deep Photo Style Transfer ”算法原理与实现和该模型优于之前相关模型的关键之处。

3.7K40
来自专栏麻文华的专栏

证件识别技术进化史

当我们在手机APP端绑定银行卡、认证个人资料时,用拍照代替手工录入,手机神奇滴识别了我们的证件类型和格式,并从中找到了它所想要的信息,这一点是否也是很智能的呢?

1.9K10

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励