CSS3 中 图标编码 icon——Font-Awesome
在做网页开发中经常会用到图标,原来经常会到一些icon网站上找导入到项目中,现在Font-Awesome中的有很多的图标,并且还在不断更新
现在Font-Awesome最新版本是4.7,下载出来的Font-Awesome有下面这些文件,只保留css和fonts文件夹中的内容就可以了
新建一个html页面,在html用引用css样式
<link href="css/font-awesome.min.css" rel="stylesheet">
在官网中选择好要引用的图标点击该图标进去
<ul class="fa">
<li class="fa fa-list-ul">百度</li><br/>
<li class="fa fa-list-ul">谷歌</li>
</ul>
页面显示注意引用样式的时候要在样式(fa-list-ul)前面加上fa
如果想改变图标和文字颜色呢?
<ul class="fa">
<li class="fa fa-list-ul">百度</li><br/>
<span style="color:red;"><li class="fa fa-list-ul">谷歌</li><span>
</ul>
页面显示
只需要在li标签前面加上<span>标签设置color颜色就可以了。
这里只是做一个简单的介绍,还想了解更多可以看看官网的例子
还有一个Font-Awesome中文网站,不过版本没有英文版本的新,可以参考下
IE9之前还只支持eot格式,需要将ttf格式转换成eot格式
在线转换工具 Webfont Generator
还可以参考一些文章 http://www.jb51.net/css/70033.html
CSS3 中 图标编码 icon——Font-Awesome的更多相关文章
- icon font在sketch中的下载与安装
icon font的下载安装: 1.首先打开sketch--插件--管理插件--获取插件--搜索 icon font--点击icon font--clone or download--下载的是一个sk ...
- CSS Sprites+CSS3 Icon Font
CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...
- 字体图标 icon font
Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够自由地变化 颜色能够自由地改动 加入阴影效果 * ...
- 把UI图里的小图标制作成icon font
一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...
- (转)在iOS中使用icon font
http://ued.taobao.org/blog/?p=8579 在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现.而为了要兼容普通屏与Ret ...
- 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具)
继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库 ...
- 在iOS中使用icon font
博文转载至 http://www.cocoachina.com/industry/20131111/7327.html 在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平 ...
- 字体图标Icon Font
字体图标Icon Font 前段时间研究怎样做字体图标,在网上查找诸多资料,诸多尝试,找到一套可以自己制作自己独立控制的制作流程,公司按照这套流程形成一套自己公司图标,本人目前所在公司已经在使用没有发 ...
- 在iOS开发中使用icon font的方法
http://iconfont.cn/help/iconuse.html 在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现.而为了要兼容普通屏与R ...
随机推荐
- Loading Large Bitmaps Efficiently
有效地加载大位图文件-Loading Large Bitmaps Efficiently 图像有各种不同的形状和大小.在许多情况下,他们往往比一个典型应用程序的用户界面(UI)所需要的资源更大.例如, ...
- 【Android学习】Merge 优化布局
<merge />标签用于减少View树的层次来优化Android的布局 新建项目,不需要改动 运行后使用“DDMS -> Dump View Hierarchy for ...
- Android之悬浮窗口实现(WindowManager)
工作中遇到一些项目需要把窗体显示在最上层,像来电弹窗显示电话号码等信息.拦截短信信息显示给用户或者游戏中实现声音的调节,我们想这些数据放在最上层,activity就满足不了我们的需求了,有些开发者使用 ...
- [译]Javascript中的闭包(closures)
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- [转]Linux安装前配置操作记录
转至:http://m.blog.csdn.net/weixin_35884835/article/details/52385077 1.修改用户的SHELL的限制,修改/etc/security/l ...
- 让 Winform 窗口悬浮的简单方式
很多次设置这个 TopMost 属性会莫名的不起作用,有时又可以.一直在想是为什么会这样? 后来多次尝试,发现这个属性必须在窗体某些其他属性后设置,比如在 Height.Width 这样的属性后. 看 ...
- EIP权限工作流升级说明-2019/3/5
首页增加待办事项直接处理按钮 2,新增处理历史记录
- JavaScript混淆压缩
比较好用的压缩软件,支持合并 JsCompressor-v3.0 比较好用的混淆站点:http://dean.edwards.name/packer/
- 一种Web服务的go语言实现
0.引言 go语言已成为当今web后台开发的首选语言,关键在于其简洁性和高效并发特性.go中提供了丰富通用的http开发接口,但一般需要对其进一步封装才能更好的用于实际项目中.因此,本文基于开源库(g ...
- eclipse jdk安装
在Ubuntu16.04.4安装jdk 转载自:http://www.cnblogs.com/zyrblog/p/8510132.html 一.在Ubuntu16.04.4上安装jdk 1.下载jd ...