前端菜鸡之路——网页上的图标
如何在页面上放置我们需要的图标,这个问题从我学习前端以来便一直伴随着我,从开始的全部用img标签来放图标到之后的用雪碧图,用字体,但是再多的方法也要懂得如何在不同的情形下去使用这些方法。所以刚在加班中过完圣诞的我坐在了电脑前,想要对这些熟悉而又陌生的东西进行整理和总结。
首先是从img标签说起,当我第一次切图时便和它邂逅,当时觉得好神奇,给它一个路径居然可以找到我想要的图片,并且展示出来,功能有点类似于快递员,于是我开始频繁的收各种快递,用到图片的地方都选择使用它。虽然这么做并不算错,但很显然不是任何时候都可以用的,也有一些问题需要注意,一个img标签就代表了一个请求,而当网页上存在大量的图标时,请求数也随之提升,但是浏览器的并发请求数是有限制的,请求当然是越少越好,这也是网站优化时需要重点解决的问题,尤其是对于类似淘宝那样的网站,图标数量巨大,大量使用img标签是不可能的。
这时,就需要用到雪碧图,他的原理十分简单,把很多个图标放在一起,做成一张图片,然后通过CSS的background-image和background-position属性控制它的位置,让它显示我们需要的内容,使用时还是需要注意几点:①标签需要指定宽高,因此最好使用块级元素。②由于无法控制图标大小,对于需要自适应的图片不适用。
另外还有就是雪碧图的制作比较繁琐,对于我这样手残的程序猿简直是折磨,幸好像gulp这些工具都有生成雪碧图的插件,而且还会生成CSS样式,但是位置有时候不太合适,调整起来需要点耐心。
最后还有一种方法,就是用font-face,也就是自定义字体,它和雪碧图有些相似的的地方,尤其是制作起来非常麻烦,还没有什么可以用的工具,甚至为了做字体我还专门去下载了一个做字体的软件,过程大概是这个样子:
1.准备工作:字体制作软件,字体文件。
2.用软件打开准备好的字体文件。
3.找到合适的矢量图标,下载下来,放到字体文件当中,可以在软件中查看到图标的编码。
4.保存字体文件,再用网上的字体转换工具得到不同格式的字体文件,通常还会有一个CSS文件,里面有自定义字体的CSS代码,或者也可以自己写。
@font-face {font-family: 'emotion';src: url('emotion.eot'); /*IE9*/src: url('emotion.eot?#iefix') format('embedded-opentype'), /*IE6-IE8*/url('emotion.woff') format('woff'), /*chrome、firefox*/url('emotion.ttf') format('truetype'), /*chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('emotion.svg#svgFontName') format('svg'); /*iOS 4.1-*/}
5.把上面的CSS代码放入你的CSS文件,然后在需要用到图标的地方引用定义的字体,并且内容用图标的编码代替。
.icon:after, .icon::after{font-family:"emotion"Tahoma;display:inline-block;content:"i";/*在这里调用字符*/width:16px;height:16px;margin-left:-16px;/*position:absolute什么的也可以,看具体情况*/}
6.最后在浏览器上调整一下就行了。
7.如果有什么简单的方法或者工具请忽略上述步骤,顺便指点我一下,跪谢!
做完这些终于可以在网页上看到图标了,它比起雪碧图的优势在于可以设置图标大小,但是无法设置比例,,可以任意改变颜色,所以个人感觉比较适合用于移动端上的需要自适应图标而雪碧图只能通过不同的图片来切换。而且文件也不大,兼容性也好。
使用场景的话和雪碧图相比,它适合用于纯色的矢量图,维护起来非常麻烦,有可能需要改动的地方最好别用,还有如果项目赶时间就算了,用雪碧图吧。
转载于:https://www.cnblogs.com/yxyblogs/p/5079223.html
前端菜鸡之路——网页上的图标相关推荐
- 个人博客(前端菜鸡)持续开发中,可前往 欢迎访问. www.amayaliu.cn
你必须非常努力,才能看起来毫不费劲. You have to work very hard to look effortless. 个人博客(前端菜鸡)持续开发中,可前往 欢迎访问. www.amay ...
- 菜鸡毕业路:量化策略(二)JoinQuant入门
菜鸡毕业路:量化策略(二) 学习目标 量化入门(一) 学习计划 学习目标 量化策略学习主要分为一下几个方向: 1) python基础,爬虫 2)机器学习深度学习理论基础 3)常用的量化模型 4)数据库 ...
- 前端菜鸡入职一年后的……
去年三月入职现在的公司,写这篇文章的时候已经入职一年了,也有一些感受吧,分享给大家 入职的时候给自己定了一些目标,因为在公司主要用的是vue,别的用得少,所以默默地给自己制定如下几条 1.搭建自己的b ...
- 时隔一年半,我,一个卑微的前端菜鸡,又来写面经了
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 进群参与,每周大家一起学习200行左右的源码,共同进步.已进行4个月了,很多小伙伴表示收获颇丰. 作者:刮涂层_ ...
- 打叉图标html,网页上一些图标和按钮显示为叉为什么
原因: 1.网速过慢导致. 2.浏览器设置问题. 3.系统问题导致. 解决方法: 1.检查网速传输速度,可以打开"运行"--输入CMD,在命令提示符中输入ipconfig /rel ...
- laravel改代码没变化_菜鸡程序员是如何写代码的?
每个程序员都要历经从菜鸡到大牛过程蜕变胡过程.当初大家起点都差不多,工作多年后,有些人依然停留在菜鸡,有些人却已成为大牛,所有的事情,都是一点一滴习惯养成.让我们看看菜鸡程序员是如何写代码的?有可能找 ...
- html5怎么画机器猫,不用HTML5/CSS3如何在网页上画机器猫
不用HTML5/CSS3如何在网页上画机器猫 (2010-10-30 13:36:06) 前段时间有人用 CSS3 技术在网页上画了一个机器猫,可以用来测试各大浏览器对 CSS3 的支持程度,不用说, ...
- 我是如何走上前端开发这条路 并常年保持一线竞争力的
我是怎么走上前端开发这条路? 首先,我是个文科生,大学里只学过vb,觉得计算机编程这东西太玄乎,不是我玩得转的. 后来机缘巧合去做了一家互联网创业公司的HR,阅了上千份程序员的简历,面了上百个不同水平 ...
- 一个菜鸡的ACM之路
花絮 做为一个大三计软狗,那么菜,打完19年的区域赛,也没时间打20年的区域赛了吧.这个学期,是我的第一次,也是最后一次,打CCPC和ICPC,忙前忙后,共打了3场:打完后,又去赶各种死亡DDL:DD ...
最新文章
- 升级在即,BU发布新版本并将Mempool未确认交易限制增加到500
- 2021春季学期-创新设计与实践-Lesson1
- 【 C 】作用域、链接属性、存储类型、static 关键字简介及总结
- Mycat高可用集群搭建
- sql多字段求和降序排序_elasticsearch基础笔记11-搜索排序
- 腾讯云张贤国:北大将我从少年变成了技术研究者
- 计算机专业比重点线高40多分,这3所211大学,超过一本线40分就可报考,性价比高,值得报考...
- 快速学习使用springmvc、strust2、strust1以及它们的对比
- 筒灯智能驱动芯片作用_如然之光,魅族 Lipro 智能家居发布首期健康照明系列--智能设备 -...
- crammd5 php,使用CRAMMD5的SMTP身份验证
- hive sql 怎么实现循环_shell中循环调用hive sql 脚本的方法
- Window下利用命令行提交代码到GitHub
- visio 2013安装失败正在回滚
- 一分钟电脑自动关机的代码
- Linux信号量常用操作表
- TFTP协议下载服务器指定文件夹内的图片
- (Java蓝桥杯算法)递归方法求Ckn
- 电脑连上了WIFI,但是却没有网(前提WIFI没有问题)
- 2019年前端road map
- 信息系统项目管理师考试是自学好还是找培训好?