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. PHP 递归无限极下级

    下面是自己用到的一些递归方法,当然都是借鉴的,各位看官请勿怪 第一种 有层级 $array = array( array('id' => 1, 'pid' => 0, 'n' => ...

  2. Linux下MongoDB的安装、配置、启动

    下载 MongoDB下载地址为 https://www.mongodb.org/downloads 安装 将文件放到/usr/local/目录下并解压 tar -zxvf mongodb-linux- ...

  3. 获得Java中System对应一些属性值

    public static void main(String[] args){ System.out.println("Java运行时环境版本:\n"+System.getProp ...

  4. app内嵌H5调用分享

    最近产品提出了一个需求:我们在合作方的app中提供的部分页面中增加分享页面,具体要求是在3个二维码推广页面调用app的分享接口,分享方式有3种,分别是点击”分享链接“按钮调起分享,点击”分享图片“按钮 ...

  5. 玩转ApplicationContextAware

    当一个类实现了这个接口之后,这个类就可以方便地获得 ApplicationContext 中的所有bean.换句话说,就是这个类可以直接获取Spring配置文件中,所有有引用到的bean对象.结合工厂 ...

  6. python：post请求业务、调用微信api监控业务

    vim post.py #!/usr/bin/env python # -*- coding: utf-8 -*- import json import os import datetime impo ...

  7. Makefile文件中的sed介绍

    haoxin$ sed --helpUsage: sed [OPTION]... {script-only-if-no-other-script} [input-file]... -n, --quie ...

  8. C/C++编程之内存管理

    内存分配方式 内存分配方式一共有三种: (1)从静态存储区域分配: 内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在,例如,全局变量,静态变量. (2)在栈上创建: 在执行函数时, ...

  9. hdu 5878

    I Count Two Three Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  10. JavaScript正则表达式-非捕获性分组

    非捕获性分组定义子表达式可以作为整体被修饰但是子表达式匹配结果不会被存储. 非捕获性分组通过将子表达式放在"?:"符号后. str = "img1.jpg,img2.jp ...