icon小图标的使用

适当的图标，可以达到一图胜千言的效果。

css sprite
font + HTML
font + css

css sprite简介：

在国内被称为“css雪碧图”，也叫“css图片精灵”。
它是把网页中一些零星的小图片整合到一张图片文件中个，在利用css的背景图片 定位到要显示的位置，因此也叫做“图片拼合”技术。

好处：

这样做可以减少文件体积和服务器请求次数，从而提高效率

坏处：

就是很难调试

特点：

相对单个想想小图标，它节省文件体积和服务器请求次数
一般情况下，你需要保存为pbg-24的格式
可以设计丰富多彩的图标颜色

难点：

需要预先确定每个图片的大小
注意小图标与小图标之间的距离

技术要点：
background-image:
background-position:

font + HTML 图标字体

使用图标字体可以大大减少前端工作量

灵活性：轻松的改变图标的颜色以及其他css效果例如：background
可扩展性：改变图标的大小，就先改变字体大小一样简单例如：font-size
矢量性：图标是矢量的，与像素无关，缩放图标不会影响清晰度在pc 平板手机上都能使用
支持性：支持所有现代浏览器包括IE6；
本地使用：通过添加定制字体到你的本地系统，你可以再各种不同的设计和变成应用程序中使用它们

推荐： IcoMoon

网址：https://icomoon.io/

<i class="icons icon-i"> &#x343a; <i><i class="icons icon-ui"> &#x3448; <i>.icons{display:inline-block;*display:inline;*zoom:1;font-style: normal;
}
@font-face{font-family: mui-global-iconfont; //名称//路径src:url(fonts/font_icons_ui.eot);                                       /* IE9*/src:url(fonts/font_icons_ui.eot?#iefix) format('embedded-opentype'),    /* IE6-IE8 */url(fonts/font_icons_ui.woff) format('woff'),      /* chrome、firefox */url(fonts/font_icons_ui.ttf) format('truetype'),   /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url(fonts/font_icons_ui.svg#iconfont) format('svg')  /* iOS 4.1- */}
.icon-i{font-family: mui-global-iconfont !important;font-size: 22px;color: #c40000;
}

@font-face:

EOT 格式

它是微软开发的用于嵌入网页中的字体，ie专用字体

woff

web字体中最佳格式，它是一个开放的TrueType/OpenType的压缩版本。2009年被开发，如今被w3c组织推荐

TTF

1980年，由Microsoft和Apple联合开发的一套字体标准，是Mac OS和WINv操作系统中最常见的一种字体

svg

用于svg字体渲染的一种格式，它是由w3c定制的开放标准的图形格式

font + css 图标字体

使用before content元素
例如：

a:before{content:'\e908';
}

icon小图标的使用相关推荐

在网页中实现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小图标的使用

css sprite简介：

好处：

坏处：

特点：

难点：

font + HTML 图标字体

推荐： IcoMoon

EOT 格式

woff

TTF

svg

font + css 图标字体

icon小图标的使用相关推荐

最新文章

热门文章