Font Awesome 的使用
加入文件
1.最简单的方式:CDN (由BootCDN提供)
一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西!
将以下代码粘贴到网页HTML代码的 <head>
部分.
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
2.下载文件,使用默认CSS
如果您使用了默认的Bootstrap CSS样式,那么你可以使用这种方式来引入默认的Font Awesome CSS样式。
复制整个 font-awesome
文件夹到您的项目中。
在HTML的 <head>
中引用font-awesome.min.css<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
3.icon使用方法
基本图标
您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa
,再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i>
,因为它更简洁。 但实际上使用 <span>
才能更加语义化。
<i class="fa fa-camera-retro"></i> fa-camera-retro
大图标
使用 fa-lg
(33%递增)、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
固定宽度
使用 fa-fw
可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。
<div class="list-group"><a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a><a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a><a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a><a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
用于列表
使用 fa-ul
和 fa-li
便可以简单的将无序列表的默认符号替换掉
<ul class="fa-ul"><li><i class="fa-li fa fa-check-square"></i>List icons</li><li><i class="fa-li fa fa-check-square"></i>can be used</li><li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li><li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
Font Awesome 的使用相关推荐
- 火狐自定义字体失败 downloadable font: no supported format found
Bootstrap+AdminLTE搭起来的服务,突然字体图标都访问不了了,报错如下: 解决办法1:FontAwesome官网找解决办法,不引用本地的css,直接引用官网建议的地址 <scrip ...
- Flutter中集成Font Awesome
1.添加引用 在 pubspec.yaml文件中,加入 font awesome的引用 1 dependencies: 2 flutter: 3 sdk: flutter 4 5 # The foll ...
- CSS文字文本样式(font字体、css外观属性)
1. font字体 1.1. font-size:大小 作用:font-size属性用于设置字号. p { font-size:20px; } 单位: 可以使用相对长度单位,也可以使用绝对长度单位. ...
- html页面调用ico图标,如何在HTML中使用图标字体 - icon font?
日期:2012-8-27 来源:GBin1.com 在线演示 本地下载 主要特性 使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小 自由的修改颜色 添加阴影 ...
- html编写的过程中,为什么font设置属性的时候,第二个属性不起作用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- RuntimeWarning:Glyph 21435 missing from current font.
RuntimeWarning:Glyph 21435 missing from current font. 目录 RuntimeWarning:Glyph 21435 missing from cur ...
- Bitmap Font 报错“characters from the file are not available in the font”解决办法
出现这种情况的主要原因是因为Bitmap Font中设置的字体编码格式与TXT文本的编码格式不一致,知道原因,问题就迎刃而解了 方法一:√ Bitmap默认编码格式为Unicode,将TXT文本编码也 ...
- Font from origin 'http://apps.bdimg.com' has been blocked
1.1.1 现象 原来使用百度CDN上的bootstrap 3.0.3,升级到3.3.4后即出现如下错误: Font from origin 'http://apps.bdimg.com' has b ...
- Css Font 详细研究
2019独角兽企业重金招聘Python工程师标准>>> 在设计自己博客主页的时候想修改下字体,结果发现自己对字体(css font)的了解只是一知半解,属于翻书医生的水平,呵呵.就细 ...
- 给网页图标字体 Font Awesome 添加动画效果
在国外网站中使用Web字体已经流行起来,虽然使用中文不太靠谱,但我们可以使用图标字体,也是很是方便的,图标字体有很多,可看<30个免费网页图标字体以及使用方法>一文,其中Font Awes ...
最新文章
- centos 7 安装jdk1.8
- python小游戏源码-Python小游戏之300行代码实现俄罗斯方块
- OpenCV学习笔记资料大集锦
- 谈谈8年C++面向对象设计的经验体会
- 2016.2.29(异常)
- mf怎么使mysql信息分区_细聊MySQL的分区功能
- Qt for Android 开发环境配置
- 浅谈对程序员的认识_浅谈IT界程序员大佬普遍对性的追求
- python中 12_python编程中常用的12种基础知识总结
- 初学WPF,做一款小游戏练习一下
- SqlMap自动化SQL注入测试工具简绍
- 手机端html使用地理定位,html5之使用地理定位
- 左手用R右手Python系列之——表格数据抓取之道
- ASP.NET MVC显示UserControl控件(扩展篇)
- WSL使用史上最详细教程
- 何夕 - 六道众生·何夕科幻自选集(2014年1月31日)
- Android自动化测试应用:uiautomatorviewer工具的安装与使用
- 李宏毅2022机器学习HW2解析
- 举例说明计算机中常用的变址寻址,堆栈寻址,从形式地址到得到操作数的寻址处理过程。
- GPL和AGPLv3的区别
热门文章
- 如何 拆 贴片电容 而不是把焊盘给搞坏
- 双击进入共享计算机时提示无法访问错误(连接共享打印机)
- 微信开发者工具无法选择预览和真机调试_小程序开发 第二篇:使用微信小程序开发者工具、wepy框架初始化项目...
- 微软的Framework导致该内存不能为written或read的错误?
- (ES1)ElasticSearch+Kibana+Elasticsearch-analysis-ik系统环境搭建
- Web Services 简介
- 【无标题】人工智能的定义
- 华为mate50pro和华为p50pro哪个好
- 小米路由器3c 虚拟服务器,小米路由器3C上不了网怎么办?
- matlab单容建模仿真,大学毕业论文-—基于matlab的过程控制系统仿真研究