关于icon小图标的实现

1、使用CSS Sprite

即需要用到background-image和background-position这两个属性。

一般图片应该保存为png-24格式

通过background-image引入图片后，再根据background-position定位图片中小图标的位置，从而得到自己想要的图标

2、引用字体图标

优点：

推荐使用IcoMoon，网站：icomoon.io

各浏览器对font字体文件的格式为：

①我们通过@font-face来引入下载的字体。

@font-face{

font-family:"font-name"; //自定义字体名字

src:url("字体文件所在位置") format("文件格式对应的编码");

font-weight:normal;

font-style:normal;

}

各字体文件所对应的format编码（第一列）。

②引入字体后，我们要应用该字体图标

.classname{

font-family:"font-name";

}

③在html文件中，需要根据下载的文件写入字体图标的16进制编码。

打开下载的文件可以看到下面这个图标的16进制的编码为f048。

在html中，

这样子就可以在网页中显示这个图标了。

需要注意的是：

第二行代码中，为什么要加上?#iefix呢？

因为不加上IE8是不会显示的。

在css中，IE9的兼容模式，如果不加上上面的第一行代码，图标将不会显示。

除了可以在html文件中使用16进制编码引用小图标外，我们还可以通过css的伪类来引入。

.classname:before{

content:"\f048"

}

关于icon小图标的实现相关推荐

icon小图标的使用
icon小图标的使用适当的图标,可以达到一图胜千言的效果. css sprite font + HTML font + css css sprite简介: 在国内被称为"css雪碧图&qu ...
在网页中实现icon小图标的几种方法
总所周知,网页的美观程度往往比这个网页的使用程度更重要,因为它能直接吸引用户的眼球.在网页中,小图标在美工方面的作用更是不言而喻,小图标种类多样,给人以直观的反映.在现有的网站中,99.9%的网站都采 ...
html title中加图标,科技常识：HTML中title前面小图标的实现_如何给网页标题添加icon小图标...
今天小编跟大家讲解下有关HTML中title前面小图标的实现_如何给网页标题添加icon小图标 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML中title前面小图标的实现_如何给网 ...
关于input输入框内设置小图标的问题
其实很简单,只需要html和css就可以搞定啦首先:<input class="layui-input" id="test1" placeholder= ...
Eclipse各种小图标的含义
Eclipse 各种小图标的含义缺省类型(可视包) 公共类型缺省接口(包可视) 公共接口缺省内部类型(包可视) 私有内部类型受保护内部类型公共内部类型缺省内部接口(包可视) 私有内部接口 ...
Eclipse自定义启动画面和状态栏图标以及各种小图标的含义
一. 启动画面自定义第一种情况:纯Eclipse 找到Eclipse安装路径下\eclipse\plugins\org.eclipse.platform_3.7.2.v201202080800,具体 ...
html+input改变图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 将小图标当做input的背景来插入,直接上代码吧: Box{ height: 50px; backgroun ...
输入法中表情和小图标的应用
输入法表情和小图标的应用具体的兼容性问题博主下面会说.这里就用表情举例了,小图标我就用伪类试一下了,至于作为文本文字我就不试了,ok,让我们开始吧!!! 将表情和小图标作为文字显示代码: < ...
输入法表情和小图标的应用
输入法表情和小图标的应用具体的兼容性问题博主下面会说.这里就用表情举例了,小图标我就用伪类试一下了,至于作为文本文字我就不试了,ok,让我们开始吧!!! 将表情和小图标作为文字显示代码: < ...
MUI tabbar购物车小图标的制作
1.在制作底部的 Tabbar 区域,使用的是 MUI 的 Tabbal.html 2.在制作购物车小图标的时候,操作会相对多一些: + 先把扩展图标的 css 样式,拷贝到项目dist目录中的 ...

关于icon小图标的实现

关于icon小图标的实现相关推荐

最新文章

热门文章