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. 【meet in middle】poj1840Eqs

    震惊!map的常数居然如此之大 Description Consider equations having the following form: a1x13+ a2x23+ a3x33+ a4x43 ...

  2. docker-compose volumes指令路径映射问题

    背景:最近在自学docker容器知识,在跟着<Docker - 从入门到实践>进行 docker-compose 搭建django/postgreSQL 实例.在搭建过程中由于自己操作失误 ...

  3. perl:_DATA_ _LINE_ _FILE_

    这三个应该是句柄: _DATA_ _FILE_ _LINE_ 没有找到具体介绍...记录于此,已被后续补充.

  4. PyQt5(1)——QToolTip, QPushButton, QMessageBox, QDesktopWidget

    #面向对象方法 import sys from PyQt5.QtWidgets import QApplication, QWidget, QToolTip, QPushButton, QMessag ...

  5. 00049_super关键字

    1.子父类中构造方法的调用 (1)在创建子类对象时,父类的构造方法会先执行,因为子类中所有构造方法的第一行有默认的隐式super();语句: (2)格式 调用本类中的构造方法 this(实参列表); ...

  6. 七丶人生苦短，我用python【第七篇】

    模块 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个 ...

  7. SPOJ-COLONY - Linearian Colony！简单二分思想

    COLONY - Linearian Colony 一道很水的题却坑我两天!在CF上做过类似的题,用递归可以找到答案,但感觉不会这么麻烦,于是看看有没有什么规律,对Y分奇偶貌似可以找到规律,但WA了三 ...

  8. 分析nginx日志常用的命令总结

    1. 利用grep ,wc命令统计某个请求或字符串出现的次数 比如统计GET /app/kevinContent接口在某天的调用次数,则可以使用如下命令: cat /usr/local/nginx/l ...

  9. linux的自启动服务脚本的(/etc/rc.d/init.d或者其链接/etc/init.d)

    转载地址:http://www.cnblogs.com/diyunpeng/archive/2009/11/11/1600886.html Linux有自己一套完整的启动体系,抓住了linux启动的脉 ...

  10. Method for Estimating the Number of Concurrent Users

    1. Formula for Estimating the Average Number of Concurrent users We begin by defining what the numbe ...