用字体在网页中画icon图标

第一步:获取字体资源
IconMoon网站
https://icomoon.io

iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮preferences来设置)。
它有“Use i”使用<i>标签来画图标;“Use Attribute Selectors”使用属性选择器;“Use a Class”使用class属性。

使用<i>标签时,会将font-family等字体值赋值给所有<i>标签。
使用属性选择器时,会将font-family等字体值赋值给[class^="icon-"],[class*=" icon-"]
使用class属性,会将font-family等字体值赋值给.icon

无论使用以上哪种方式,都要先用@font-face引入字体。

第二步:选择制作方式

方式1:CSS Sprite

也叫CSS精灵,是一项使用背景图片定位,在网页中画icon图标的技术。

它是把网页中一些零星背景图片整合到一张图片文件中,再利用CSS的背景图片定位到要显示的位置,因此也叫“图片拼合”技术。

1、好处:减少文件体积和服务器请次数,从而提高效率。

2、坏处:你需要预先确定好每个图标的大小及图标间的间距,且图标的样式不能再改变

3、图片:需要将图片保存为PNG-24的文件格式。

4、原理:

其实就是将所有的小图片做在一张图中,然后在每个<li>标签中都导入这张图作为背景图,然后使用background-position对图片进行定位(注意,在每个html元素中,背景图片都是从左上角开始显示的,显示不了的地方会被自动隐藏),定位到需要显示的图标位置,超出<li>标签宽高的部分就隐藏。 需要设置background-image和background-position的属性。

5、一般写法:

 background-image:url(images/bgimage.gif);
background-position: 0 -80px;

(0是left的值,-80px是top的值,也就是图片向上隐藏了80px。这两个值可以自己根据需要小图标显示的位置而设立,可以取负值)

方式2:font字体 + HTML
使用字体库以文本形式在网页中画小图标,可用CSS控制其样式

1、优点:
(1)灵活性:轻松地改变其他CSS效果或使用color值改变图标的颜色
(2)可扩展:使用font-size可轻松改变图标大小
(3)图标是矢量的,缩放图标不会影响清晰度
(4)兼容性:字体图标支持所有一般写法:现代浏览器(包括糟糕的IE6)
(5)本地使用:通过添加制定字体到本地系统,可以再不同的设计和编辑应用程序中使用它们

2、一般写法:

 @font-face{
font-family: "imooc-icon";
src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */ /*.eot?#iefix是兼容IE6-IE8*/
src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")
,url("../fonts/icomoon.woff") format("woff")
,url("../fonts/icomoon.ttf") format("truetype")
,url("../fonts/icomoon.svg") format("svg");
font-weight: normal;
font-style: normal;
} /*用于图标抗锯齿,光滑显示,写在所有图标元素的公共类里面*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
 <!--html中的写法-->
<li><a href=""><i style="color: #efe0ce;" class="imooc-icon"></i></a></li>

3、写法说明:
<li>标签中的如这样的值是16进制数值,是每个icon小图标显示的时候的默认代码。刚开始得到的是f048;这样的值,需要自己加上&#x,浏览器才能识别。
注意有些字体库不是这样使用的,有些是用class属性来决定要显示的是哪个图标,而不是使用16进制数值。

方式3:font字体 + CSS

1、用@font-face引入字体,写法与方式2的相同

2、使用CSS内容:

before伪元素或者after伪元素
伪元素的content属性

*伪元素:创建一个虚假的元素,并插入到目标元素内容之前
  语法: 固定元素:伪元素{}
    固定类:伪元素{}

3、插入的内容由content属性来制定。

 /*这里的.icon-music的class名称是可以随意起的,只需把名称复制粘贴到html代码中就行*/
.icon-music:before{
/*这里的16进制数值是代表小图标的内容。
在16进制的值前面,加上反斜线"\"进行转义*/
content: "\e605";
}

总结:三种方法对比

CSS sprite 兼容所有主流浏览器低版本

font+HTML 兼容所有主流浏览器低版本

font+css 不支持低版本浏览器

【参考资料】

慕课网   http://www.imooc.com/learn/243

特别鸣谢慕课网的至尊玉老师!

在网页中制作icon图标的更多相关文章

  1. 字体在网页中画ICON图标

    用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...

  2. 用字体在网页中画Icon图标

    第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...

  3. 网页中多个图标在一张图片上,使用css将各图标显示

    现在的网页中显示很多图标算是常态,发现项目中页面上用到的图标都是单个图标单个文件,用的时候直接往页面上挂,这确实很常态. 如果,网站是挂在外网上,或者网速过低,又大量使用图标的情况下,由于浏览器和服务 ...

  4. 18 Zabbix 新增map中的icon图标

    点击返回:自学Zabbix之路 18 Zabbix 新增map中的icon图标 zabbix系统默认会带有许多的icon图标,但对于特殊需求人群可能无法满足,那就需要新增icon图标. 通过Admin ...

  5. MFC在对话框中的Picture contrl控件中添加icon图标,并改变icon图标的背景色与对话框背景色一致

    1.在对话框添加Picture Contrl 控件 2.选中控件,修改ID为IDC_STATIC_PICTURE 和 Type属性为icon 其图标改为 3.添加变量m_picture变量名是灰色,说 ...

  6. 怎么在网页中加入ICO图标

    1.首先制作一个16x16的icon图标,命名为cssbbs.ico(这里的名字可以随便改!),放在根目录下.2.然后将下面的代码嵌入head区:<link rel="icon&quo ...

  7. bootstrap在input框中加入icon图标

    <form class="form-horizontal"> <div class="form-group has-feedback"> ...

  8. 用字体在网页中画icon小图标

    HTML结构: <i class="icons icon-ui"> 㐺 <i> <i class="icons icon-ui"& ...

  9. 如何用字体在网页中画icon

    一.用css雪碧图 1.简介 CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background- ...

随机推荐

  1. HTML定位(滚动条、元素,视口)定位

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 数据库相关文章转载(1) MySQL性能优化之参数配置

    1.目的: 通过根据服务器目前状况,修改Mysql的系统参数,达到合理利用服务器现有资源,最大合理的提高MySQL性能. 2.服务器参数: 32G内存.4个CPU,每个CPU 8核. 3.MySQL目 ...

  3. javascrip keyCode属性备案

    keycode    8 = BackSpace BackSpacekeycode    9 = Tab Tabkeycode   12 = Clearkeycode   13 = Enterkeyc ...

  4. 关于javaScript注册事件传递参数的浅析

    最近这半年作为一个java 程序员,我写的javaScript代码都快比java代码多了,前段时间是给某银行做一个柜员管控系统,在柜员授权这一块功能上,由于柜员的授权需要考虑各方面的因素,比如机构权限 ...

  5. ASP.NET Web Forms的改进

    虽然ASP.NET Web Forms不是vNext计划的一部分,但它并没有被忽视.作为Visual Studio 2013 Update 2的一部分,它重新开始支持新工具.EF集成和Roslyn. ...

  6. C#封装、多态、抽象、接口、匿名方法等学习

    1:封装 将对象进行封装,并不等于将整个对象完全包裹起来,而是根据实际需要,设置一定的访问权限,用户根据不同的权限调用对象提供的功能,在C#语言中,可以使用修饰符public.internal.pro ...

  7. C++ Code_TabControl

    主题 1. 选项卡控件基础 2. 显示图标的选项卡 3. 选项卡控件高级 4. 5.      属性      选项卡控件基础 1.插入1个对话框,新建1个类 CCDialog1,1 个对话框对应一个 ...

  8. IDEA和Eclipse经常使用快捷键(Win Mac)

    一. 代码生成/补全 Alt+回车  导入包,自己主动修正(Eclipse中Ctrl+Shift+O ) Alt+Inser 生成getter setter.构造器 Ctrl+Shift+Space( ...

  9. PHP中header用法详解带范例(转)

    header的用法 header()函数的作用是:发送一个原始 HTTP 标头[Http Header]到客户端.标头 (header) 是服务器以 HTTP 协义传 HTML 资料到浏览器前所送出的 ...

  10. js代码的一些小技巧

    1. 数组中通过赋值语句来改变值 var a = 1; var msg = ["value0","value1"]; for(var i = 0;i<10 ...