使用font-awesome小图标
- 引言
网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋。下面的小图标,你是不是会经常用到?
你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲到。因为它们也可以变为彩色的。
黑白的也好,彩色的也罢,如果用传统的“css + 图片”的方式来制作这些icon,我估计你至少得雇佣一个专业的设计师吧。一般的程序猿,包括前端程序猿,估计只能去搜索了,不会自己拿ps画。例如,我之前经常去一个叫做“懒人图库”的网站去找资源,现在那个网站还存在。
但是问题又来了,如果你搜索来的是黑白的,现在也用黑白的,后期网站变化主题怎么办?你搜出来的是16 * 16的,要有个页面需要 32 * 32的怎么办?如果沿着这个方向考虑,你会发现,自己将在这上面耗费大量资源和精力。
但是如果我告诉你,有一个东西,它已经为你准备了将近500个常用icon图标(还在不断更新),能大能小,能随便修改颜色,完全开源,完全免费,你会不会心动?如果你非常着急,先去百度一下“font-awesome”,再来继续读文章不迟。
- 应用font-awesome
font-awesome当前的版本是4.2.0,咱们就直接用这个版本的来说。
2.1 下载
去http://www.thinkcmf.com/下载,解压之后,应该能看到“css”和“font”两个文件夹。css文件夹中存放着css文档,font文件夹中存放在着适用于不同浏览器的字体文件。其中,css文件夹中可以只保留 font-awesome.min.css 和 font-awesome-ie7.min.css 两个文档,其他的可以删掉。结构应该如下:
2.2 简单应用
将整理好的文件夹加入到你的网站,新建一个测试页面 demo.html,将css文件夹中的两个css文件,引入到页面。
<link href="fontawesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<!--[if IE]>
<link href="fontawesome-4.2.0/css/font-awesome-ie7.min.css" rel="stylesheet" />
<![endif]-->
如上图,如果是IE浏览器,需要引入 font-awesome-ie7.min.css ,因为fontAwesome支持IE7+浏览器的。(唉。。为何不再往前延伸到支持IE6呢。。。)
引用CSS文件之后,接下来就可以使用图标了。例如,我要在页面中显示一个“链接”的图标,我可以这么写:
<span><i class="fa fa-link"></i> 链接</span>
此时页面将显示:
显示是显示出来了,那么对应链接的这个css类“fa-link”我是从哪里找来的呢?
答案非常简单!进入官网的icon页面,里面有所有的icon的css类,就可以找到你想要的那个图标的css类了。
(注意,在“fa-link”前面还要加入一个“fa”类,例如 )
2.3 设置大小和颜色
学会了以上的简单使用,设置颜色和大小非常简单,只要你会用css设置文字的颜色和大小就行。直接看代码:
复制代码
<span style="font-size:12px;"><i class="fa fa-link"></i> 链接</span>
<br />
<span style="font-size:20px;"><i class="fa fa-link"></i> 链接</span>
<br />
<span style="color:red"><i class="fa fa-link"></i> 链接</span>
<br />
<span style="color:white;background-color:#003399;"><i class="fa fa-link"></i> 链接</span>
复制代码
得出的结果就是:
so easy 吧!这样看来它确实是个好东西。
2.4 其他应用
fontAwesome还有其他更加复杂一点的应用,包括固定宽度、浮动、反转、旋转、叠加图标等。
官网上讲解的更好,我就不再这里重复描述了,可以去http://www.thinkcmf.com/font/examples查阅这些应用的例子。
- 扩展
知其然也要知其所以然。但是本文目的是应用,不是解读,所以我也没有详细了解这块。
大家可以查阅http://www.jb51.net/css/70033.html这篇文章,里面有对这些原理的讲解,虽然不是很深入,但是足够了解用的。
———————————–分割线——————————-
以上转发自:http://www.cnblogs.com/wangfupeng1988/p/4129500.html,亲测可用。
另外font-awesome的官网:http://fontawesome.io/#icon-carousel
学习前端的小伙伴,可以收藏这个网站:http://www.bootcdn.cn/,很多js开源库这里面都有.
还有https://html5up.net/,有炒鸡多的网页实例,页面精美又不是很复杂,可能实现起来还是挺考验的。路漫漫,共勉啊
使用font-awesome小图标相关推荐
- 用Font Awesome代替网页icon小图标
1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说--"我们用的都是彩色的,不是黑白的" ...
- 文字前的小图标HTML,Font Awesome实现文字链右边加一个箭头图标
在上一篇文章里介绍了用css背景图实现文字链右边加一个箭头图标的方法,本文将介绍用Font Awesome实现文字链右边加一个箭头图标的方法. Font Awesome是一个图标字体库,包含300多种 ...
- 在网页中画Icon小图标
在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧, ...
- 浏览器title中的小图标0927 0928
1.如何实现浏览器title中的小图标 我们需要借鉴link标签 Link标签的标签属性有哪些? rel type href Rel 是当前页面和url之间的关系 rel="stylesh ...
- 【odoo15】odoo中的fa-xxx小图标
odoo中的小图标使用的就是这个: odoo中的可用图标库可以在如下的位置找到包含图标css文件: /addons/web/static/lib/fontawesome/css/font-awesom ...
- canvas实战——WPS分享PDF文件的小图标
一日,托姐姐给打印简历时.用wps分享简历文件的时候,看到分享文件上如下图小图标. 因为,前几天有简单学习Canvas,所以想着能不能用canvas给它画出来. 首先,我们设置一下canvas的画布: ...
- hexo next 解决自定义侧边栏用户社交链接小图标 custom sidebar social icon
背景 next主题下侧边栏社交链接小图标默认从FontAwesome网站获取图标,但是国内某些网站,如Bilibili,网易云等等,并不支持. 博主希望能够自定义各种侧边栏小图标,目前搜索到的教程并不 ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- Webdings字体、Wingdings字体对照表、用CSS3绘制的各种小图标
一.Webdings是一个TrueType的dingbat字体,于1997年发表,搭载在其后的Microsoft Windows视窗系统内,大多的字形都没有Unicode的相对字. 使用很简单 1.网 ...
最新文章
- sql server存储过程中SELECT 与 SET 对变量赋值的区别
- 「图解」ThreadLocal 在并发问题中的应用
- JBoss vs. Tomcat
- share extension 不显示_这几项超好用的云开发扩展能力,别说你还不知道!
- 多协程爬取中大微博内容(以及转发数,点赞数,评论数)
- python编写查询_如何用python脚本编写查询
- wxhtmltopdf 图片路径问题_图片引入路径问题
- windows桌面远程工具连接Ubuntu
- 华为云发布 GaussDB(DWS) 实时数仓,技术创新释放行业数据价值
- 排序算法之——希尔排序分析
- ESLint 规则详解(二)
- Windows Server 2016安装SQLServer2008R2
- oracle12能卸干净吗,oracle卸载干净【设置方案】
- [阅读笔记] 联邦学习攻防综述 An Overview of Federated Deep Learning Privacy Attacks and Defensive Strategies
- 因为一条SQL,我差点被祭天......,我太难了!
- 小米手环NFC 模拟门禁卡 不买东西最简解决方案(100字)
- 《Java标准教程》pdf 附下载链接
- 学计算机人都很自私,心理学家:内心极度虚伪的人,往往都有这三个特征,趁早远离!...
- springboot 银联支付(快捷支付)
- android 购物车操作并发,Android 购物车页面和逻辑实现
热门文章
- 【PSI/SI学习系列】2.PSI/SI深入学习3——SI信息解析2(SDT, EIT, TDT,TOT)
- go 学习笔记之有意思的变量和不安分的常量
- bread是可数还是不可数_bread是可数名词吗为什么
- java之随机抽取数字并按从小到大排序
- php怎么输出倒三角_典型的格式化输出算法,用*组成的倒三角形
- linux基本功系列-help命令实战
- 直面聊天机器人(一)
- 向老板汇报,如何写好PPT?
- Leetcode-SQL学习计划-SQL入门-1527.患某种疾病的患者【regexp正则表达式匹配】
- 关于 NFT 版权保护的争议