zoukankan      html  css  js  c++  java
  • ICOMOON!强悍的WEB字体图标制造器/Web字体使用实例

    IcoMoon!一个可以通过个性化设置来创建自定义图标(字体)的生成器!也可以将SVG图片,转换成web字体

    IcoMoon是一项免费的服务,通过使用不同设置使我们能够创建自定义的ICON图或ICON字体。
    当然了,网站也有资源打包下载!
    包括大多数流行的免费图标集(在its library里搜索),您可以挑选其中任何一个自己钟意的图标下载。
    同时,它会提供两种下载方式:图片版和字体版!

    图片版是经过CSS Sprites技术处理的PNG格式,字体版有多种格式供我们选择(EOT,SVG,WOFF,TTF)。
    此外,除了其他设计师们设计的图标,IcoMoon也有自己免费的海量图标集,它们都非常赞。

    网站地址: http://icomoon.io/app/

    使用方式:

    1.选择图标

    2.下载字体库,copy样式

    3.在项目中使用

    @font-face {
        font-family: 'icomoon';
        src: url('../myfonts/icomoon.eot');
        src: url('../myfonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../myfonts/icomoon.woff') format('woff'), url('../myfonts/icomoon.ttf') format('truetype'), url('../myfonts/icomoon.svg#shejidaren') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    .icon-qq:before {
        content: "e900";
    }
    .icon-qq {
        font-family: icomoon;
        color: gray;
        width: 30px;
        height: 30px;
        line-height: 28px;
        text-align: center;
        font-size: 20px;
        display: inline-block;
        border: 1px solid gray;
        border-radius: 50%;
        transition: transform ease 0.2s;
    }
        .icon-qq:hover {
            color: red;
            border: 1px solid red;
            cursor: pointer;
            transform: scale(1.1);
        }
       <span data-icon="qq" class="icon-qq"></span>

    显示结果:

  • 相关阅读:
    11.枚举类.md
    10. Lambda表达式.md
    9.内部类
    8.抽象类、接口和多态.md
    7.final关键字.md
    jQuery学习笔记(5)-事件与事件对象
    Log4Net学习笔记(1)-完整的例子
    SqlServer知识点-操作xml
    NHibernate常见错误汇总(0)-持续更新中
    jQuery学习笔记(4)-设置元素的属性和样式
  • 原文地址:https://www.cnblogs.com/tianma3798/p/5611813.html
Copyright © 2011-2022 走看看