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制作小图标的实践的更多相关文章

  1. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

  2. 【CSS学习笔记】初始化CSS后，写li，并利用背景图片，来完成li小图标的效果，且达到个浏览器兼容

    第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里.    在<li>中设置背景图片的尺寸,地址,不重复, ...

  3. 关于input输入框内设置小图标的问题

    其实很简单,只需要html和css就可以搞定啦 首先:<input class="layui-input" id="test1" placeholder= ...

  4. 转：Eclipse 各种小图标的含义

    原文地址:https://www.cnblogs.com/widget90/p/7592507.html Eclipse 各种小图标的含义,记录一下. Eclipse的Package Explorer ...

  5. css：自己实现一个带小图标的input输入框

    有小图标的input输入框<input type="text" placeholder="输入手机号" style="background:ur ...

  6. Eclipse自定义启动画面和状态栏图标以及各种小图标的含义

    一. 启动画面自定义 第一种情况:纯Eclipse 找到Eclipse安装路径下\eclipse\plugins\org.eclipse.platform_3.7.2.v201202080800,具体 ...

  7. 手机uc浏览器，获取到图片，但左上有小图标的问题

    手机uc浏览器有个坑 获取不到图片,左上是这样的

  8. 使用font awesome制作网站常用社交工具联系方式图标

    在公司项目或者个人建站时经常会有这么一个需求,就是在网站的底部以图标的形式加入自己的某些常用社交联系方式,比如QQ.微信.微博.Twitter等等,如果采用传统切图的方式去制作这些图标会有两个缺点: ...

  9. 【咸鱼教程】TextureMerger1.6.6 三：Bitmap Font的制作和使用

    BitmapFont主要用于特殊字体在游戏中的使用   目录 一 方法1:添加字符      适合一张一张的零碎图片来制作位图字体 二 方法2:系统字体      适合使用已安装的系统字体来制作位图字 ...

随机推荐

  1. hibernate3缓存（hibernate）

    一级缓存:当应用程序调用Session 的save() .update() .savaeOrUpdate() .get() 或load() ,以及调用查询接口的list() .iterate() 或f ...

  2. 搭建SSI开发框架原理

    Spring2.5.Struts2.Ibatis开发框架搭建(一) ssi, ibatis 一.框架下载 1.1   Struts2框架 Struts2框架发展于WebWork,现在捐献给了Apach ...

  3. 风格附加css

    #header #blogTitle { background: url("http://images.cnblogs.com/cnblogs_com/aiwuxia/1249780/o_1 ...

  4. odoo10 fields.Selection 根据权限显示不同的selection内容

    摘要:一般作为下拉选项,selection的选项内容是固定,针对一些特殊要求,根据权限组显示不同的selection内容的,可以参考odoo源码的. 前提:基于 odoo10.0 的源码 参考源码1: ...

  5. c++ 当输入的数据不符合数据类型时，清理输入流

    if (!cin) { cin.clear(); while (cin.get() != '\n') continue; cout << "Bad input; input pr ...

  6. 【计数】51nod1677 treecnt

    要将答案看做是小问题的贡献和 Description 给定一棵n个节点的树,从1到n标号.选择k个点,你需要选择一些边使得这k个点通过选择的边联通,目标是使得选择的边数最少. 现需要计算对于所有选择k ...

  7. leepcode作业解析-5-15日

    1.删除排序数组中的重复项 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外 ...

  8. NSArray 排序

    先研究一种方法 NSMutableArray *array = [[NSMutableArray alloc] initWithCapacity:]; ; i < ; i++) { ; [arr ...

  9. Java中IO流讲解(一)

    一.概念 IO流用来处理设备之间的数据传输 Java对数据的操作是通过流的方式 Java用于操作流的类都在IO包中 流按流向分为两种:输入流,输出流 流按操作类型分为两种: 字节流 : 字节流可以操作 ...

  10. css 标题

    纯CSS制作的复古风格的大标题 .vintage{ background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAA ...