网页中的icon图标(初始)-原创手记-慕课网

网页icon图标三种方式

1.CSS Sprite

2.font+HTML

3.font+CSS

CSS Sprite

又称“图片拼接”技术：把网页中一些零散的图片整合到一张图片中，再利用CSS的背景图片定位到要显示的位置。

优势

减少文件体积和服务器请求次数。

知识点

background-image——引入图片

background-position——定位

难点

需要预先确定每个小图标的大小。

注意图标之间的距离。

Icon+HTML

使用字体在网页中画Icon小图标

优势

1.灵活性：轻松的改变图标的颜色或其他CSS效果。

2.可扩展：改变图标的大小就如改变字体大小一样容易。

3.矢量性：图标是矢量的，与像素无关。缩放图标不会影响清晰度。

4.兼容性：支持所有现代浏览器。

5.本地使用：通过添加定制字体到你的本地系统，你可以在各种不同的设计和编辑应用程序中使用他们。

字体文件格式

1.EOT：微软开发的用于嵌入网页中的字体，IE专用字体

2.WOFF：Web字体中最佳格式，是一个开发的TrueType/OpenType的压缩版本。09年被开发，并被W3C组织推荐标准

3.TTF：1980年前后，有Microsoft和Apple联合开发的一套字体标准，是Mac OS和WIN 操作系统中最常见一种字体。

4.SVG：用于SVG字体渲染的一种格式，他是由W3C指定的开发标准的图形格式。

代码例子

CSS代码

@font-face{
    font-family: "imooc-icon";
    src: url('../fonts/icomoon.eot') 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;  
}
.imooc-icon{
    font-family: "imooc-icon";
    font-style: normal;
    font-weight: normal;
    font-size: 64px;
}

HTML代码

<li><a href=""><i class="imooc-icon"></i></a></li>
<li><a href=""><i class="imooc-icon"></i></a></li>

在线演示地址--- >(点这里)

font+CSS

通过调用class名称来引入icon

知识点

1.:before伪元素(创建一个虚假元素，并插入到目标元素之前）

selector:pseudo-lelment{
    property:value;
}

2.content属性
在CSS2.1中被引入，与:before及:after伪元素配合使用，插入生成内容。

content:normalnone[<string><uri>..]+;

小例子

用CSS实现引入icon的思路是用class来引入,上面的CSS代码不变,并加入

icon-1{
    content:"\e601
}
icon-2{
    content:"\e60a
}

HTML中引入class即可实现

<li><a href=""><i class="imooc-icon icon-1"></i></a></li>
<li><a href=""><i class="imooc-icon icon-2"></i></a></li>

结语

1.学习慕课网-"用字体在网页中画ICON图标"课程所做的笔记.

2.icon图标几乎所有的网站都有所应用,合适作为一个单个知识点来集中学习

3.一个很好用的icon图标库---http://www.iconfont.cn/

4.我的博客---http://www.mardan0.cc