Font Awesome使用指南

简介: Font Awesome介绍 Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识,现在FontAwesome不仅仅可以在bt上使用,还可以应用在各种web前端开发中。

Font Awesome介绍

Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识,现在FontAwesome不仅仅可以在bt上使用,还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标,字体图标主要是支持自适应、可以使用字体的各种特性(比如变色、变大变小、字体阴影等)、减少数据加载、样式更容易定义等。

Font Awesome 特性

  1. 一个字体文件, 585个图标。
  2. 不需要javascript要求:更快的载入速度
  3. 无限的可扩展性:可伸缩矢量图形意味着每一个图标在任何大小看起来真棒。
  4. 自由免费:你可以将它应用到你的商业中。
  5. CSS控制:轻松的定义图标的颜色,大小,阴影,和任何与CSS相关的特性。
  6. 完美的视网膜显示:使用矢量字体,这意味着他们可以完美的显示在高分辨率显示器中
  7. 为BootStrap而生:完全的兼容BootStrap新版3.0
  8. 桌面友好:你可以查看字体的样式列表
  9. 兼容屏幕阅读器:不像其他字体图标不兼容屏幕阅读器

Font Awesome的使用

  1. 你只需要到:http://fontawesome.io 下载压缩包然后解压到你的项目中。把fronts文件夹引入到自己本地项目。
  2. 在你的html头部的head里面添加对相应的font-awesome的样式。

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

  1. 根据这里的案例开始你的项目。
  2. 如需兼容IE浏览器,可以使用Font-awesome的3.2.1版本。下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。

<!--[if IE 7]>

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

<![endif]-->

使用规则和代码:

可以用i标签和span标签引用字体,在html标签语义上,span标签更符合使用语义。使用时,先给元素加上“.fa”的基础字体样式,然后加上“.fa-想要使用的图标名称”。字体可按倍数缩放,具体规则请参考官网说明。用户可自行设定颜:色大小等属性,同一般的字体属性设置。以使用heart这个字体图标为例:

基础引用:<span class="fa fa-heart"></span> 或<i class="fa fa-heart"></i>

放大图标:<span class="fa fa-heart fa-lg"></span>(倍数放大用fa-数字+x) fa-2x, fa-3x, fa-4x, or fa-5x 

设置属性:如定义了红色字体为:font-red,12号字体大小为f12,则应用到此图标上可以写成<span class="fa fa-heart font_red f12"></span>

还有其他问题的童鞋大可访问:http://fontawesome.dashgame.com/#basic 进行更详细的学习。

 

相关文章
|
4月前
|
数据安全/隐私保护
Solid Converter PDF v10 安装及使用教程
Solid Converter PDF v10 安装及使用教程
119 0
|
5月前
|
前端开发
Font Awesome 一套绝佳的图标字体库和CSS框架
Font Awesome 一套绝佳的图标字体库和CSS框架
31 0
|
10月前
|
前端开发 开发者
前端封装库/工具库的字体/图标之Font Awesome
随着前端技术的不断演进,前端封装库/工具库在Web开发中扮演着越来越重要的角色。其中,字体/图标工具库可以为Web应用程序提供美观、一致和易于管理的图标。而Font Awesome是一个非常受欢迎和广泛使用的字体/图标库。今天我们将探讨一下Font Awesome这个实用工具库。
290 1
|
前端开发 CDN
Font-Awesome4.7.0版本字体图标显示问题
在Font-Awesome4.7.0版本有时可能会出现字体图标显示为空白小方框的情况,本文提供一个解决思路
1051 0
Font-Awesome4.7.0版本字体图标显示问题
|
前端开发
CSS3中引入多种自定义字体(font-face)
CSS3中引入多种自定义字体(font-face)
397 0
CSS3中引入多种自定义字体(font-face)
|
前端开发
font-awesome不显示以及字体样式的引入方式:
font-awesome不显示以及字体样式的引入方式:
633 0
font-awesome不显示以及字体样式的引入方式:
|
前端开发
Bootstrap4 图标无法使用,使用font-awesome代替
前言 最近正在练手一个Angular4的项目,需要用到矢量图标相关的功能,但是发现Bootstrap4 图标功能失效,进过调查发现是图标功能被移除bootstrap包下,所以在这里记录一下。 正文 首先将font-awesome进行安装: npm install --save font-awesome 然后在angular.json中进行配置,找到styles,将下方位置进行添加: "./node_modules/font-awesome/css/font-awesome.css" 这样在项目中正常使用就行。
2069 0
QML学习笔记(九)-引入Font-awesome
 源码:https://github.com/sueRimn/QML-ExampleDemos 1.首先得在qml文件夹下建立字体文件,将font-awesome放入进去   2.然后在main.
1365 0
|
Web App开发 JavaScript iOS开发