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. Cocos2d-X研究之3.0 场景切换特效汇总

    Cocos2d-X研究之3.0 场景切换特效汇总 2014-08-05      0个评论    来源:游戏编程    收藏    我要投稿 cocos2d-x 3.0中场景切换特效比较多,而且游戏开 ...

  2. （54）zabbix链接及解除模板链接

    上一节就已经涉及到了链接与解除模板链接(link与unlink),这篇文章除了说明怎么链接模板以外,还会特别讲到一些需要特别注意的细节. HOST链接模板之后,便继承了模板里定义的item,trigg ...

  3. TB平台搭建之二

    主要想记录关于debug问题: 一般我会1.定位问题所在位置比如使能信号错误.地址读写错误.数据流pipeline错误.... 2.首先看问题的源头(对应信号)是否还正确,比如出现XX要查看她的第一级 ...

  4. ajax以及文件上传的几种方式

    方式一:通过form表单中,html input 标签的“file”完成 # 前端代码uoload.html <form method="post" action=" ...

  5. 记我的小网站发现的Bug之一 —— 某用户签到了两次

    1.故事背景 今天上午我忙完手中的事情之后突然想起来我还没签到,于是赶紧打开签到页面,刚点击了签到按钮,提示"签到成功,获得25阅读额度!",正准备退出浏览器,忽然发现签到列表有异 ...

  6. i.mx53开发的一些问题

    i.mx53开发的一些问题 转载于此:http://blog.csdn.net/shell_albert/article/details/8242288   原来i.mx53上4GB的Nand Fla ...

  7. ZZULIoj 1907 小火山的宝藏收益

    Description      进去宝藏后, 小火山发现宝藏有N个房间,且这n个房间通过N-1道门联通.   每一个房间都有一个价值为Ai的宝藏, 但是每一个房间也都存在一个机关.如果小火山取走了这 ...

  8. C++基本数据类型占字节数

    32位编译器 char :1个字节char*(即指针变量): 4个字节(32位的寻址空间是2^32, 即32个bit,也就是4个字节.同理64位编译器)short int : 2个字节int:  4个 ...

  9. mysql复制延迟排查

    今天收到报警,提示从库延时,首先当然是上去查看情况,首先查看机器负载,如下: 可以看到使用cpu已经100%,io没有等待.那么查看mysql是什么情况,执行show processlist没有发现任 ...

  10. centos 装 android studio (2)

    这里,我打算安装 JDK 1.8. $ sudo add-apt-repository ppa:webupd8team/java $ sudoapt-get update $ sudoapt-get ...