网页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
共同学习,写下你的评论
暂无评论
作者其他优质文章