专注WEB开发 分享经验,沉淀知识

HTML设置网页图标的两种方法

 作者:chenxing  时间:2016-10-13 17:11  阅读:977  评论:

首先,它是已图标字体方式实现的,即用字体的方式来使用图标。这样做最大好处在于,在使用的过程中你可以灵活的控制图标的大小,颜色,和css控制字体一样,相当于把它当作文字来使用。

在写HTML页面时少不了要使用各种小图标,来丰富页面元素。

我们经常会使用两种方式来做网页图标

  • 背景精灵
  • 矢量图标库

使用背景精灵实现网页图标

通俗的讲就是把小图标整合到一张图中,然后在css引入背景图通过background的属性去定位到背景图相应的图片位置进行展现。这样做的好处就是能够减少网络请求,网页只要请求一张背景图就能够把很多要应用的小图标下载到本地应用。

    /**
        1.在要给加图标的位置设置一个class
        2.url 为图标背景图片路径
        3.100px 200px 指要使用的这个图标在背景图片上的坐标
    **/
    .icon{
        background : url("img/icon.png") no-repeat 100px 200px;
    }

使用矢量图标库实现网页图标

首先,它是已图标字体方式实现的,即用字体的方式来使用图标。这样做最大好处在于,在使用的过程中你可以灵活的控制图标的大小,颜色,和css控制字体一样,相当于把它当作文字来使用。

字体图标使用方法:

这里介绍常用的矢量图标库-Iconfont-阿里巴巴矢量图标库

1.下载图标字体:

阿里巴巴矢量图标库 打开阿里官网里面有海量的网站常用图标,可以打开任意一个图标项目,根据你自己的项目选择图标。选择图标时将鼠标放到图标会弹出'购物车','收藏','下载'三个图标点击购物车图标,先收集该项目所要应用的所有图标。然后一并下载。

图一:选择

选择图标

图二:下载

下载图标

2.在项目中引入图标字体文件

把整个下载的文件放入到项目中,不要把iconfont.css和其他文件分开,以免造成iconfont.css里引入字体文件的路径错误。页面中只要link iconfont.css文件就行。

<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"  />

3.元素中使用图标字体 打开下载文件中的demo.html文件,选择字体图标的编码放到i标签中,这样i标签的位置就能生成一个图标。

<i class="iconfont">ᜀ</i>

以上便是两种方式的网页图标设置方式,两种方式的优劣自己在写项目慢慢体会吧。

除特别注明外,本站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 http://www.qiusuoweb.com/8.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

阿里开发mysql规范手册(阅读整理)

 2021-09-30 15:27  86

如何一次性推送百万级别的消息

 2021-02-26 17:57  331

redis set集合取出一组数据并删除

 2021-02-26 12:50  568

一年时间又回到这里

 2019-07-27 16:54  430

 最新评论

 诚心: 09月29日 23:01
学到了
来源: 如何一次性推送百万级别的消息
 Nick: 04月14日 12:26
网上的资料还是太老,都只是取一个元素,解决了一大难题
来源: redis set集合取出一组数据并删除
 skywalker: 11月03日 18:21
简洁明了
来源: mysql 获取某个日期的前一天或后一天
 lisheng: 05月09日 19:26
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里