为了账号安全,请及时绑定邮箱和手机立即绑定

网页中的icon图标(初始)

标签:
Html/CSS 设计

网页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

点击查看更多内容
13人点赞

若觉得本文不错,就分享一下吧!

0 评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消