@font-face制作小图标的实践
1、为啥要用font-face制作小图标
1)适用性:一个图标字体要比一系列的图像要小,一旦字体图标加载完,图标则会立刻显示出来,不需要去下载一个图像。
2)可扩展性:可以使用font-size对图标进行大小设置,这使得能够随时输出不同大小的图标;但如果是图片,则需要为不同大小的图片输出不同的文件。
3)灵活性:可以为图标添加任何文字效果,并且可以在任何背景下展示。
4)兼容性:网页字体支持所有现代浏览器,包括IE低版本。
2、实现步骤
首先,将SVG转换成web字体。使用网站:Icomoon
点击‘Import Icons’按钮导入需要转换为web字体的图标。选中后点击 ‘Generate Font’按钮将web字体下载下来。
下载文件中有个demo.html,打开文件,可以看到不同的图标对应的通字符:
其次,调用字体。
声明@font-face:
@font-face{
font-family: 'icomoon';
src:url('fonts/icomoon.eot'); /* IE 专用*/
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* IE*/
url('fonts/icomoon.woff') format('woff'), /* chrome,firefox,IE9+,safari,opera */
url('fonts/icomoon.ttf') format('truetype'), /* IOS4.2+ */
url('fonts/icommon.svg') format('svg'); /* IOS */
font-weight: normal;
font-style: normal;
}
使用字体:
[class ^="icon-"],[class*=' icon-']{
font-family: 'icomoon';
}
.icon-1:before{
content: "\e600";
}
测试代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-face 测试页面</title>
<style>
@font-face{
font-family: 'icomoon';
src:url('fonts/icomoon.eot'); /* IE 专用*/
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* IE*/
url('fonts/icomoon.woff') format('woff'), /* chrome,firefox,IE9+,safari,opera */
url('fonts/icomoon.ttf') format('truetype'), /* IOS4.2+ */
url('fonts/icommon.svg') format('svg'); /* IOS */
font-weight: normal;
font-style: normal;
}
[class ^="icon-"],[class*=' icon-']{font-family: 'icomoon';}
.icon-1:before{content: "\e600";}
.icon-2:before{content: "\e601";}
.icon-3:before{content: "\e602";}
.wrap ul{list-style: none;}
.wrap ul li{line-height: 28px;font-size: 28px;}
</style>
</head>
<body>
<section class="wrap">
<ul>
<li class="icon-1">第一个li</li>
<li class="icon-2">第二个li</li>
<li class="icon-3">第三个li</li>
</ul>
</section>
</body>
</html>
效果图:
@font-face制作小图标的实践的更多相关文章
- ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息
一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...
- 【CSS学习笔记】初始化CSS后,写li,并利用背景图片,来完成li小图标的效果,且达到个浏览器兼容
第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里. 在<li>中设置背景图片的尺寸,地址,不重复, ...
- 关于input输入框内设置小图标的问题
其实很简单,只需要html和css就可以搞定啦 首先:<input class="layui-input" id="test1" placeholder= ...
- 转:Eclipse 各种小图标的含义
原文地址:https://www.cnblogs.com/widget90/p/7592507.html Eclipse 各种小图标的含义,记录一下. Eclipse的Package Explorer ...
- css:自己实现一个带小图标的input输入框
有小图标的input输入框<input type="text" placeholder="输入手机号" style="background:ur ...
- Eclipse自定义启动画面和状态栏图标以及各种小图标的含义
一. 启动画面自定义 第一种情况:纯Eclipse 找到Eclipse安装路径下\eclipse\plugins\org.eclipse.platform_3.7.2.v201202080800,具体 ...
- 手机uc浏览器,获取到图片,但左上有小图标的问题
手机uc浏览器有个坑 获取不到图片,左上是这样的
- 使用font awesome制作网站常用社交工具联系方式图标
在公司项目或者个人建站时经常会有这么一个需求,就是在网站的底部以图标的形式加入自己的某些常用社交联系方式,比如QQ.微信.微博.Twitter等等,如果采用传统切图的方式去制作这些图标会有两个缺点: ...
- 【咸鱼教程】TextureMerger1.6.6 三:Bitmap Font的制作和使用
BitmapFont主要用于特殊字体在游戏中的使用 目录 一 方法1:添加字符 适合一张一张的零碎图片来制作位图字体 二 方法2:系统字体 适合使用已安装的系统字体来制作位图字 ...
随机推荐
- hibernate3缓存(hibernate)
一级缓存:当应用程序调用Session 的save() .update() .savaeOrUpdate() .get() 或load() ,以及调用查询接口的list() .iterate() 或f ...
- 搭建SSI开发框架原理
Spring2.5.Struts2.Ibatis开发框架搭建(一) ssi, ibatis 一.框架下载 1.1 Struts2框架 Struts2框架发展于WebWork,现在捐献给了Apach ...
- 风格附加css
#header #blogTitle { background: url("http://images.cnblogs.com/cnblogs_com/aiwuxia/1249780/o_1 ...
- odoo10 fields.Selection 根据权限显示不同的selection内容
摘要:一般作为下拉选项,selection的选项内容是固定,针对一些特殊要求,根据权限组显示不同的selection内容的,可以参考odoo源码的. 前提:基于 odoo10.0 的源码 参考源码1: ...
- c++ 当输入的数据不符合数据类型时,清理输入流
if (!cin) { cin.clear(); while (cin.get() != '\n') continue; cout << "Bad input; input pr ...
- 【计数】51nod1677 treecnt
要将答案看做是小问题的贡献和 Description 给定一棵n个节点的树,从1到n标号.选择k个点,你需要选择一些边使得这k个点通过选择的边联通,目标是使得选择的边数最少. 现需要计算对于所有选择k ...
- leepcode作业解析-5-15日
1.删除排序数组中的重复项 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外 ...
- NSArray 排序
先研究一种方法 NSMutableArray *array = [[NSMutableArray alloc] initWithCapacity:]; ; i < ; i++) { ; [arr ...
- Java中IO流讲解(一)
一.概念 IO流用来处理设备之间的数据传输 Java对数据的操作是通过流的方式 Java用于操作流的类都在IO包中 流按流向分为两种:输入流,输出流 流按操作类型分为两种: 字节流 : 字节流可以操作 ...
- css 标题
纯CSS制作的复古风格的大标题 .vintage{ background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAA ...