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 进行更详细的学习。

 

相关文章
|
4月前
|
JavaScript Unix Linux
nvm与node.js的安装指南
通过以上步骤,你可以在各种操作系统上成功安装NVM和Node.js,从而在不同的项目中灵活切换Node.js版本。这种灵活性对于管理不同项目的环境依赖而言是非常重要的。
1013 11
|
12月前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
前端开发 Java 应用服务中间件
【Tomcat源码分析 】"深入探索:Tomcat 类加载机制揭秘"
本文详细介绍了Java类加载机制及其在Tomcat中的应用。首先回顾了Java默认的类加载器,包括启动类加载器、扩展类加载器和应用程序类加载器,并解释了双亲委派模型的工作原理及其重要性。接着,文章分析了Tomcat为何不能使用默认类加载机制,因为它需要解决多个应用程序共存时的类库版本冲突、资源共享、类库隔离及JSP文件热更新等问题。最后,详细展示了Tomcat独特的类加载器设计,包括Common、Catalina、Shared、WebApp和Jsp类加载器,确保了系统的稳定性和安全性。通过这种设计,Tomcat实现了不同应用程序间的类库隔离与共享,同时支持JSP文件的热插拔。
【Tomcat源码分析 】"深入探索:Tomcat 类加载机制揭秘"
|
存储
汉字和数字站几个字节,估算内存占用情况
该文内容讲述了字符和字节的关系:中文标点占3字节,英文字母或数字占1字节,英文标点也占1字节。1字节等于8字位,1字位是1个二进制数。此外,还介绍了存储单位的换算:1B=8b,1KB=1024B,1MB=1024KB,1GB=1024MB。其中,b代表字位,B代表字节,KB是千字节,MB是兆字节,GB是吉字节。
687 2
|
缓存 负载均衡 测试技术
掌握wrk压力测试工具的优化技巧与实践
掌握wrk压力测试工具的优化技巧与实践
301 1
|
缓存 监控 Unix
性能监控之 Linux 命令 top、vmstat、iostat、free、iftop 基础
【2月更文挑战第9天】性能监控之 Linux 命令 top、vmstat、iostat、free、iftop 基础
411 5
性能监控之 Linux 命令 top、vmstat、iostat、free、iftop 基础
|
运维 容灾 关系型数据库
介绍几种 MySQL 官方高可用方案
MySQL 官方提供了多种高可用部署方案,从最基础的主从复制到组复制再到 InnoDB Cluster 等等。本篇文章以 MySQL 8.0 版本为准,介绍下不同高可用方案架构原理及使用场景。
2939 3
介绍几种 MySQL 官方高可用方案
|
设计模式 算法 安全
2023下半年软件设计师 关于我用了半个月过了软件设计师这件事
这篇文章分享了作者在仅用半个月的业余时间备考并通过2023下半年软件设计师考试的经历,包括备考策略、所用资料和个人建议,同时提供了相关备考资料的获取方式。
|
网络协议 Shell Linux
技术经验分享:adb安装与使用
技术经验分享:adb安装与使用
1178 0
|
JavaScript 前端开发
【vue】跨路由传值,params和query有什么区别?
【vue】跨路由传值,params和query有什么区别?
396 0