zoukankan      html  css  js  c++  java
  • 阿里巴巴矢量图标的使用Demo

    一、html网页的使用步骤:

    1. 登录进入阿里巴巴矢量图标库中,选择自己喜欢的图标,放到购物车,http://www.iconfont.cn/plus/manage/index?manage_type=myprojects&projectId=210792

    2. 新建一个项目,保存到项目,下载到本地。

    3. 网页使用时候,首先在html网页包含:

            @font-face {font-family: "iconfont";
              src: url('iconfont.eot'); /* IE9*/
              src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
              url('iconfont.woff') format('woff'), /* chrome, firefox */
              url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
              url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
            }
    
            .iconfont {
              font-family:"iconfont" !important;
              font-size:42px;
              font-style:normal;
              -webkit-font-smoothing: antialiased;
              -webkit-text-stroke- 0.2px;
              -moz-osx-font-smoothing: grayscale;
            }

    完整demo:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>IconFont</title>
        <link rel="stylesheet" href="demo.css" />
        
        <style type="text/css">
    
            @font-face {font-family: "iconfont";
              src: url('iconfont.eot'); /* IE9*/
              src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
              url('iconfont.woff') format('woff'), /* chrome, firefox */
              url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
              url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
            }
    
            .iconfont {
              font-family:"iconfont" !important;
              font-size:42px;
              font-style:normal;
              -webkit-font-smoothing: antialiased;
              -webkit-text-stroke- 0.2px;
              -moz-osx-font-smoothing: grayscale;
            }
    
        </style>
    </head>
    <body>
        <div class="main markdown">
            <h1>IconFont 图标</h1>
            <ul class="icon_lists clear">
                
                    <li>
                    <i class="icon iconfont">&#xe601;</i>
                        <div class="name">好友印象</div>
                        <div class="code">&amp;#xe601;</div>
                    </li>
                
                    <li>
                    <i class="icon iconfont">&#xe645;</i>
                        <div class="name">酒店印象</div>
                        <div class="code">&amp;#xe645;</div>
                    </li>
                
                    <li>
                    <i class="icon iconfont">&#xe6c4;</i>
                        <div class="name">品牌印象</div>
                        <div class="code">&amp;#xe6c4;</div>
                    </li>
                
            </ul>
        </div>
        <div> <i class="icon iconfont">&#xe601;</i></div>
    </body>
    
    </html>
    View Code

    4. 引用哪个,输入:

      <i class="icon iconfont">&#xe601;</i>
  • 相关阅读:
    关于lockkeyword
    关于多层for循环迭代的效率优化问题
    Android 面试精华题目总结
    Linux基础回想(1)——Linux系统概述
    linux源代码编译安装OpenCV
    校赛热身 Problem C. Sometimes Naive (状压dp)
    校赛热身 Problem C. Sometimes Naive (状压dp)
    校赛热身 Problem B. Matrix Fast Power
    校赛热身 Problem B. Matrix Fast Power
    集合的划分(递推)
  • 原文地址:https://www.cnblogs.com/camelroyu/p/6228447.html
Copyright © 2011-2022 走看看