在网页中制作icon图标
用字体在网页中画icon图标
第一步:获取字体资源
IconMoon网站
https://icomoon.io
iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮preferences来设置)。
它有“Use i”使用<i>标签来画图标;“Use Attribute Selectors”使用属性选择器;“Use a Class”使用class属性。
使用<i>标签时,会将font-family等字体值赋值给所有<i>标签。
使用属性选择器时,会将font-family等字体值赋值给[class^="icon-"],[class*=" icon-"]
使用class属性,会将font-family等字体值赋值给.icon
无论使用以上哪种方式,都要先用@font-face引入字体。
第二步:选择制作方式
方式1:CSS Sprite
也叫CSS精灵,是一项使用背景图片定位,在网页中画icon图标的技术。
它是把网页中一些零星背景图片整合到一张图片文件中,再利用CSS的背景图片定位到要显示的位置,因此也叫“图片拼合”技术。
1、好处:减少文件体积和服务器请次数,从而提高效率。
2、坏处:你需要预先确定好每个图标的大小及图标间的间距,且图标的样式不能再改变
3、图片:需要将图片保存为PNG-24的文件格式。
4、原理:
其实就是将所有的小图片做在一张图中,然后在每个<li>标签中都导入这张图作为背景图,然后使用background-position对图片进行定位(注意,在每个html元素中,背景图片都是从左上角开始显示的,显示不了的地方会被自动隐藏),定位到需要显示的图标位置,超出<li>标签宽高的部分就隐藏。 需要设置background-image和background-position的属性。
5、一般写法:
1 background-image:url(images/bgimage.gif); 2 background-position: 0 -80px;
(0是left的值,-80px是top的值,也就是图片向上隐藏了80px。这两个值可以自己根据需要小图标显示的位置而设立,可以取负值)
方式2:font字体 + HTML
使用字体库以文本形式在网页中画小图标,可用CSS控制其样式
1、优点:
(1)灵活性:轻松地改变其他CSS效果或使用color值改变图标的颜色
(2)可扩展:使用font-size可轻松改变图标大小
(3)图标是矢量的,缩放图标不会影响清晰度
(4)兼容性:字体图标支持所有一般写法:现代浏览器(包括糟糕的IE6)
(5)本地使用:通过添加制定字体到本地系统,可以再不同的设计和编辑应用程序中使用它们
2、一般写法:
1 @font-face{ 2 font-family:"imooc-icon"; 3 src:url("../fonts/icomoon.eot"); /*IE9 兼容模式*/ 4 5 /*.eot?#iefix是兼容IE6-IE8*/ 6 src:url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")7 ,url("../fonts/icomoon.woff") format("woff")8 ,url("../fonts/icomoon.ttf") format("truetype")9 ,url("../fonts/icomoon.svg") format("svg"); 10 font-weight:normal; 11 font-style:normal; 12 } 13 14 /*用于图标抗锯齿,光滑显示,写在所有图标元素的公共类里面*/ 15 -webkit-font-smoothing: antialiased;16 -moz-osx-font-smoothing: grayscale;
1 <!--html中的写法--> 2 <li><ahref=""><istyle="color: #efe0ce;"class="imooc-icon"></i></a></li>
3、写法说明:
<li>标签中的如这样的值是16进制数值,是每个icon小图标显示的时候的默认代码。刚开始得到的是f048;这样的值,需要自己加上&#x,浏览器才能识别。
注意有些字体库不是这样使用的,有些是用class属性来决定要显示的是哪个图标,而不是使用16进制数值。
方式3:font字体 + CSS
1、用@font-face引入字体,写法与方式2的相同
2、使用CSS内容:
before伪元素或者after伪元素
伪元素的content属性
*伪元素:创建一个虚假的元素,并插入到目标元素内容之前
语法: 固定元素:伪元素{}
固定类:伪元素{}
3、插入的内容由content属性来制定。
1 /*这里的.icon-music的class名称是可以随意起的,只需把名称复制粘贴到html代码中就行*/ 2 .icon-music:before{ 3 /*这里的16进制数值是代表小图标的内容。4 在16进制的值前面,加上反斜线"\"进行转义*/ 5 content:"\e605"; 6 }
总结:三种方法对比
CSS sprite 兼容所有主流浏览器低版本
font+HTML 兼容所有主流浏览器低版本
font+css 不支持低版本浏览器
【参考资料】
慕课网 http://www.imooc.com/learn/243
特别鸣谢慕课网的至尊玉老师!
转载于:https://www.cnblogs.com/yueyishanchen/p/iconp.html
在网页中制作icon图标相关推荐
- 用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
- 在网页中画ICON图标
相信很多前端开发人员都做过导航栏图标,其实很多网站的导航栏图标使用的技术无外乎两种,CSS Sprite雪碧图和字体图标.下面就带大家一起熟悉一下这两种在网页中画ICON图标的方式. 一.使用CSS ...
- 在网页中画Icon小图标
在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧, ...
- 在网页中实现icon小图标的几种方法
总所周知,网页的美观程度往往比这个网页的使用程度更重要,因为它能直接吸引用户的眼球.在网页中,小图标在美工方面的作用更是不言而喻,小图标种类多样,给人以直观的反映.在现有的网站中,99.9%的网站都采 ...
- Qt5制作icon图标文件和发布程序简易介绍
制作icon图标文件 1.制作icon图标文件 可以进入这个网站在线制作:http://www.ico.la/ 2.创建资源文件:qrc文件 接着 先添加前缀,然后添加文件 最终结果: 3.可以用te ...
- dw cs6 html建站点,dreamweaver cs6网页中制作锚点链接的教程方法
部分网友刚刚下载使用dreamweaver cs6的朋友们,可能还不是很熟悉其中制作锚点链接?下面这篇内容就为你们带来了dreamweaver cs6网页中制作锚点链接的教程方法. dreamweav ...
- javafx 带图片的按钮菜单_怎么制作ICON图标 图片转ICON图标方法
怎么制作ICON图标 图片转ICON图标方法?接下来就与大家分享一下,有关利用软件制作ICON图标的方法,同时也介绍利用相关转换工具实现图片转ICON的方法. 方法/步骤 首先,我们需要借助如图所示的 ...
- vue在列表和下拉框中显示icon图标
vue在列表和下拉框中显示icon图标 一. 在项目中引入阿里云icon图标 二. 在data中定义icon图标列表 三. 在下拉框中显示icon图标 四. 在列表中显示icon图标 五. 在el-c ...
- 在Android Studio中使用icon图标
在Android中使用icon图标 下载ttf文件 进入iconfont.cn,并登录选择自己要的icon图标 选择添加入库,点击自己的库 选择下载代码 引用 新建Assets文件夹 将下载的icon ...
最新文章
- boost::gil::view_type用法的测试程序
- centos通过添加chrome源来安装chrome
- linux audio(alsa)驱动注册的简明流程.
- plsql能连mysql吗_80后中年夫妻做冬季热饮,一天卖300杯,女顾客:能连杯子端走吗...
- Spring boot initialization failed for https://start.spring.io
- attempting to load a 64-bit
- 架构师应该知道的37件事
- 代理服务器出现网络连接错误怎么办?
- 启动: Matlab启动慢
- c语言 逻辑 与或非
- 写全武汉的火锅店..更新版 恩..欢迎补充 ^_^
- C/C++程序的内存开辟
- a豆:在讲一个珍重每一个人的故事
- 前端将List列表转化为树型结构(reduce函数)
- 深圳计算机发展好的地方,深圳和广州的哪个发达数据比较广州的繁荣还是深圳的繁荣?...
- IOS原生生成二维码
- STC12驱动PCF8575
- JAVA基本框架搭建(Maven,jetty,Jod…
- pta mysql 训练题集 ( 61-80 )
- 14个开源免费的人工智能项目,人脸识别依旧很受欢迎