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的样式。

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

使用规则和代码:

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

基础引用: 或

放大图标:(倍数放大用fa-数字+x) fa-2x, fa-3x, fa-4x, or fa-5x

设置属性:如定义了红色字体为:font-red,12号字体大小为f12,则应用到此图标上可以写成

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

 

相关文章
|
7月前
|
C++ Windows
Awesome nostr
该文章是关于Nostr协议的详细介绍,包括其去中心化社交网络的构建方式、工作原理、中继(relays)的作用,以及与Farcaster的比较,并提供了一些可用的Nostr客户端和中继实例。
48 3
|
7月前
|
Rust JavaScript 前端开发
awesome nostr
该文章是一个关于Nostr协议及其生态系统的全面资源列表,包括协议概述、中继(Relay)实现、客户端、库、桥接和网关、工具、教程以及社区链接等多个方面的详细信息。
46 2
|
7月前
|
缓存 前端开发 Linux
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
192 0
|
前端开发 开发者
前端封装库/工具库的字体/图标之Font Awesome
随着前端技术的不断演进,前端封装库/工具库在Web开发中扮演着越来越重要的角色。其中,字体/图标工具库可以为Web应用程序提供美观、一致和易于管理的图标。而Font Awesome是一个非常受欢迎和广泛使用的字体/图标库。今天我们将探讨一下Font Awesome这个实用工具库。
522 1
|
编解码 前端开发 容器
CSS calc() 使用指南
CSS calc() 使用指南
CSS calc() 使用指南
|
前端开发 CDN
Font-Awesome4.7.0版本字体图标显示问题
在Font-Awesome4.7.0版本有时可能会出现字体图标显示为空白小方框的情况,本文提供一个解决思路
1347 0
Font-Awesome4.7.0版本字体图标显示问题
|
前端开发
Bootstrap4 图标无法使用,使用font-awesome代替
前言 最近正在练手一个Angular4的项目,需要用到矢量图标相关的功能,但是发现Bootstrap4 图标功能失效,进过调查发现是图标功能被移除bootstrap包下,所以在这里记录一下。 正文 首先将font-awesome进行安装: npm install --save font-awesome 然后在angular.json中进行配置,找到styles,将下方位置进行添加: "./node_modules/font-awesome/css/font-awesome.css" 这样在项目中正常使用就行。
2135 0
|
Web App开发 JavaScript iOS开发