icon小图标的使用
来源:互联网 发布:2017年网络流行词汇 编辑:程序博客网 时间:2024/05/29 03:22
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"> 㐺 <i><i class="icons icon-ui"> 㑈 <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';}
0 0
- icon小图标的使用
- 更改网址前面的ICON小图标
- icon 小图标
- ICON小图标
- web前端程序猿的福音----使用font-awesome代替icon小图标
- icon-font 图标字体的使用
- EasyUI中使用自定义的icon图标
- ICON 浏览器 地址栏:小图标
- 网页添加icon小图标
- 怎样设计透明背景的ICON(网页小图标)?
- icon、png网页开发中所需要的小图标
- vue如何引入icon小图标的js文件
- 实用的icon图标
- 现成的icon 图标
- 网页的ICON图标
- 分享110个超棒的免费小尺寸PSD图标icon - Micro Icon Set
- 微信小程序使用icon图标
- 使用Android系统自带的icon图标
- TIJ_第十八章 I/O
- C语言编写程序数一下 1到 100 的所有整数中出现多少次数字 9
- 文件上传支持File类型和Text类型的解决方案
- 【PAT甲级】1004. Counting Leaves (30)
- 容差码
- icon小图标的使用
- iOS -- 导航栏和标签栏的一些设置
- 压力测试的思路和方法小结
- 数据库表结构备份
- Acitvity的生命周期
- 字符串出现的次数
- 高并发设计方案一
- 数字图像处理目录列表
- 闪烁TextView