Font Awesome(一套很棒的图标库)
Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形,被保存在 .svg 的文件格式中。这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小。
你可以将 Font Awesome 图标库增添至任何一个应用中,方法很简单,只需要在你的 HTML 头部增加下列代码即可:
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
当然也可以下载到本地使用,地址:http://fontawesome.io/ http://fontawesome.dashgame.com/ (中文网)
(link的路径根据自己下载保存的位置来定);
使用方式:
i 元素起初一般是让其它元素有斜体(italic)的功能,不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i 元素中,把它变成一个图标,比如:
<i class="fa fa-info-circle"></i>
使用案例:
官网给出了详细的使用案例哦(可以自己动手试试,真理来源于实践):http://fontawesome.io/examples/
Font Awesome(一套很棒的图标库)的更多相关文章
- Font Awesome,一套绝佳的图标字体库和CSS框架
http://fontawesome.dashgame.com/ http://www.runoob.com/font-awesome/fontawesome-tutorial.html Font A ...
- Font Awesome图标库
Font Awesome 是一个非常方便的图标库.这些图标都是矢量图形,被保存在 .svg 的文件格式中.这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小 ...
- vue中引入.svg图标,使用iconfont图标库
阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...
- 在nuxt中引入Font Awesome字体图标库
介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...
- EasyDropDown – 很棒的下拉菜单,含精美主题
EasyDropDown 是一个 jQuery 插件,你可以毫不费力地将简陋的 Select 元素设置为可定制风格的下拉菜单,用于表单或者一般的导航.和著名的下拉插件 Chosen 很像,但是具有自己 ...
- 推荐几款很棒的 JavaScript 表单美化和验证插件
表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...
- 30 个很棒的 PHP 开源 CMS 内容管理系统
本文汇集了30个优秀的开源CMS建站系统,采用PHP开发.以下列表不分先后顺序. 1. AdaptCMS AdaptCMS Lite 是一个开源的CMS系统,主要特点是易用,而且可以轻松和其他系统接驳 ...
- 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具)
继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库 ...
- 优秀工具推荐:两款很棒的 HTML5 游戏开发工具
HTML5 众多强大特性让我们不需要多么高深技术就能创建好玩的网页游戏,同时证明了开放的 Web 技术能与任何其他在游戏开发中使用的技术竞争.正如标题所说,这篇文章推荐的几款很棒 HTML5 游戏开发 ...
随机推荐
- 牛客网2018暑期训练 第三场 a题
#include <bits/stdc++.h> using namespace std; vector<int> path; ; short dp[maxn][maxn][m ...
- hdu 1059
题目大意:就是有价值1.2.3.4.5.6的硬币各多少个,然后让你判断能否把他们分成价值相等的两部分. 题目思路:目测dp,一看果然dp,完全背包,需要剪枝,硬币个数为容量,下标为value,用一个b ...
- cxRichEdit1获取EXCEL的区域图片
cxRichEdit1获取EXCEL的区域图片 搞了好久却原来其实太简单: cxRichEdit1.Clear;Clipboard.Clear;ActiveSheet.cells[2, iCol] ...
- 三维数组—— 与宝玉QQ群交流 之三
鞠老师 12:50:34 A[excel文件名][excel.sheet][sheet.行][sheet.列] 构成四维数组 计131-张振渊 12:51:54 a[1][0][0][3]? 鞠老师 ...
- selenium在操作隐藏元素时会报错,怎么判断元素是隐藏的?
首先页面元素隐藏有五种方法: 1. opacity: 0; opacity 属性的意思是设置一个元素的透明度.它不是为改变元素的边界框(bounding box)而设计的.这意味着将 opacity ...
- Asp.Net Core探索 之 appsettings.json
appsettings.json是什么? 相信大家在.Net Framework的项目都会用的web.config,app.config这些文件,appsettings.json文件就是Asp.Net ...
- mysql5.7 安装错误解决
1.5.7初始化报错 2019-04-29 21:40:34 [ERROR] Child process: /home/work/mysql/bin/mysqldterminated prematur ...
- WINDOWS平台下的栈溢出攻击从0到1(篇幅略长但非常值得一看)
到1的这个过程.笔者也希望能够通过这些技术分享帮助更多的朋友走入到二进制安全的领域中.2.文章拓扑由于本篇文章的篇幅略长,所以笔者在这里放一个文章的拓扑,让大家能够在开始阅读文章之前对整个文章的体系架 ...
- redis ERR This instance has cluster support disabled
Redis 集群的时候报错: redis.clients.jedis.exceptions.JedisDataException: ERR This instance has cluster sup ...
- fastjson 反序列化漏洞笔记,比较乱
现在思路还是有点乱,希望后面能重新写 先上pon.xml 包 <?xml version="1.0" encoding="UTF-8"?> < ...