在网页中画Icon小图标
在网页中画Icon小图标。 现代网页中,绝大部分都采用了Icon小图标的方式。其积分大致分为三类,CSS Sprite,font+HTML,font+CSS。
CSS Sprite:又称为CSS雪碧,把网页中零星背景图片整合在一张图片文件夹中,再利用CSS的背景图片技术定位到要显示的位置。优点:减少文本体积和服务器请求次数,从而提高效率。 知识点:background-image background-position(向下向右取的是负值)。 特点:1,相对单个图标,节省文本体积和服务器请求次数。 2,一般情况下保存为PNG-24格式,这样图片质量。 3,可以自己设计多种多样的图标。 难点:事先确定好每个小图标的大小,还有就是细心+耐心。
Icon Fonts 优点:1,灵活性:可以改变颜色或或其他CSS效果。 2,可扩展:改变图标的大小 3,矢量性,缩放大小不失真 4,兼容性:支持所有现代浏览器 5,本地使用。
字体图标工具网站 IcoMoon https://icomoon.io eot IE专用字体(兼容IE678) WOFF 被推荐为标准(支持度比较好) TTF IE9以上以及所有浏览器支持(支持度比较好) svg 兼容低版本的Safari和opera。
font+HTML
在CSS里设置
@font-face{ font-family:"font-name"; src:url("***.eot") format("embedded-opentype"), url("***.ttf") format("..."); font-weigth:normal; font-style:normal; }
.imooc-icon{
font-family:"font-name";
font-size:77px; } //在HTML使用十六进制编码表示图标
<span class="imooc-icon"></span>//需要加&#x前缀
在IE9兼容模式下 CSS中这样设置
@font-face{ font-family:"font-name"; src:url("***.eot");/*IE9兼容模式*/ src:url("***.eot") format("embedded-opentype"), url("***.ttf") format("...") font-weigth:normal; font-style:normal; }
font+CSS 主要技术点是在CSS中设置特定class类的:before伪类的content属性。 也是先通过@font-face引入字体文件,
.classname:before{content:"\16进制编码";}
转载于:https://www.cnblogs.com/kirinchang/p/4331463.html
在网页中画Icon小图标相关推荐
- 在网页中画ICON图标
相信很多前端开发人员都做过导航栏图标,其实很多网站的导航栏图标使用的技术无外乎两种,CSS Sprite雪碧图和字体图标.下面就带大家一起熟悉一下这两种在网页中画ICON图标的方式. 一.使用CSS ...
- 用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
- html title中加图标,科技常识:HTML中title前面小图标的实现_如何给网页标题添加icon小图标...
今天小编跟大家讲解下有关HTML中title前面小图标的实现_如何给网页标题添加icon小图标 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML中title前面小图标的实现_如何给网 ...
- 给网页标题添加icon小图标
so easy: 给网页标题添加icon小图标: 直接在html文件的head部分添加下面代码(注意href的路径): <link rel="icon" type=" ...
- 如何给网页标题添加icon小图标
今天给大家分享的是如何在网页标题中加入小图标,就像CSDN前面那个红色的C一样. 主要介绍两种方法: 1.在html文件的head部分添加下面代码(注意href的路径). <link rel=& ...
- 在网页中制作icon图标
用字体在网页中画icon图标 第一步:获取字体资源 IconMoon网站 https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮 ...
- fontAwesome代替网页icon小图标
fontAwesome代替网页icon小图标 引言 奥森图标(Font Awesome)提供丰富的矢量字体图标-通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都 ...
- 将图片转换成svg文件,自定义icon小图标,svg速成
将图片转换成svg文件,自定义icon小图标,svg速成 一.svg是什么? 二.操作步骤 1.进入网站 2.将svg复制 3.引用svg文件 总结 一.svg是什么? SVG是一种图像文件格式,它的 ...
- css代码实现各式各样的icon小图标
下载地址 css代码实现各式各样的icon小图标样式 dd:
最新文章
- 设计模式之简单工厂模式(静态工厂方法)
- Debian中几个bash初始化脚本使用区别--【转载】
- 计算中英混合字符串的自己字节长度
- 11.6 mpstat:CPU信息统计
- ttl接地是高电平还是低电平_功放技术参数1——高电平
- ae运动模糊怎么调整_如何快速成长为一名AE高手?
- 来自微信团队的6个开源项目
- PADS2007教程(一)——原理图封装
- Google Java Style:Google的Java编程规范
- fseek() 函数用法
- 成语接龙快速接到“一个顶俩” (附api)
- 适合打游戏的计算机,最适合玩游戏的笔记本电脑 广受好评的三款笔记本
- 1.3寸 SH1106 OLED 屏幕驱动 基于stm32
- Android 源码分析工具
- php 8进制,PHP中的进制转换
- LIN总线:主动进气栅格系统执行器(AGS/AGM)
- 三万字机器学习项目整理(基础到进阶)
- POJ 2248 算进 P110 Addition Chains
- 卡巴斯基泄密?遭美国封杀!微软也扯上关系
- GTA5mod整合版游戏 超清画质+800辆真车+179添加人物
热门文章
- 把一台Cisco路由器配置为帧中继交换机
- 《.Net框架程序设计》读书笔记 之 结构和索引器
- 笔记本电脑字母键盘总是打出数字_笔记本电脑,这些情况都是键盘坏了,换了就能好...
- 哇 跨行竞争 Python竟能替代PS完成海报设计
- 分享一个SQLite 性能优化实例
- 使用ssh连接到centos7中docker容器
- SQL JOIN 中 on 与 where 有何区别
- 无线红外探测器02-硬件设计
- HDU5017(模拟退火算法)
- 树上启发式合并问题 ---- 2019icpc南昌 K. Tree (树上启发式合并 + 动态开点线段树)