html如何让网页有图标,HTML设置网页图标的两种方法

在写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文件就行。

3.元素中使用图标字体

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

ᜀ

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

html如何让网页有图标,HTML设置网页图标的两种方法相关推荐

w10怎么共享计算机文件共享,win10系统如何共享文件夹？windows10设置共享文件夹的两种方法...
最近,有一些刚刚安装win10正式版系统的用户反映自己因为工作需求想要在局域网内设置文件夹共享,却又不知道该如何操作.这该怎么办呢?接下来,小编就向大家介绍windows10正式版系统中快速设置共享文 ...
win10定时关机c语言,Win10系统怎么定时关机？Windows10设置定时关机的两种方法
最近,有位刚刚升级win10系统的用户反映自己在使用完电脑后经常会忘记手动关机,因此为了能够更好地保护电脑,希望在新系统中设置定时关机.这该如何操作呢?接下来,小编就向大家分享Windows10设置定 ...
计算机被填充背景花束纹理在那,为艺术字设置纹理填充的两种方法
Word2007系统中的纹理效果同样可以应用于艺术字的填充.文字表面添加纹理填充使文字看起来富于质感和立体感,word文档自带的已经有很多可供选择的漂亮纹理,用户在使用中根据其展示效果选择需要的纹理填 ...
怎么把html数据导入excel,将网页表格数据导入到Excel中的两种方法
将网页表格数据导入到Excel中的第一种方法: 第一步,将包括所需表格的网页打开,并按CTRL+C把网址复制到剪贴板,以备下一步使用. 第二步,打开运行Excel软件,单击菜单栏中的"数据→ ...
设置环境变量的两种方法
文章目录简要说明 win7方法一:添加变量名形式 win7方法二:直接添加进path变量形式 win10方法一:添加变量名形式 win10方法二:直接添加进path变量形式简要说明本文章以win ...
vue项目动态设置浏览器标题title两种方法
各位铁汁们,老步骤先效果图奉上方法一.使用插件vue-wechat-title来设置浏览器动态标题第一步:安装插件 1. npm vue-wechat-title --save 第二步:在全局ma ...
PPT文件设置打开密码的两种方法
PPT文件设置了打开密码加密,可以保护重要文件内容,今天介绍两种加密PPT文件的方法: 第一种: 点击工具栏中的[文件] 然后点击[信息]-[保护演示文稿]-[用密码进行加密] 然后输入密码,就完成了 ...
小程序设置背景图片的两种方法总结
背景图片我们会时常遇到设置背景图片,这里简单地总结下两种方法: 1.background-image background-image,顾名思义是背景图片的意思,设置父亲元素,然后通过backgro ...
设置差分对的两种方法
参考原文连接文章目录简介方法一:简便型设置方法二 CM正宗设置(主流方法) 第一步,打开CM约束管理器. 第二步,设置差分对. 1.找设置的地方. 2.进行设置.(下面操作,Elecrical ...
PPT设置“只读模式”的两种方法
想要防止PPT文件被意外更改,或者禁止他人随意更改,我们可以给PPT设置保护模式,而PPT的"只读模式"就起到了这样的作用. 具体的设置方法有两种,我们可以根据不同需求选择合适的 ...

html如何让网页有图标,HTML设置网页图标的两种方法

html如何让网页有图标,HTML设置网页图标的两种方法相关推荐

最新文章

热门文章