zoukankan      html  css  js  c++  java
  • 阿里矢量图~!import

      阿里iconfunt官网对于图标的调用写的不够详细,许多初用者不会用,下面具体介绍下总结的两种方法:

    一、在线调用方式

    1、首先建立新浪微博账号,用微博号登录iconfunt官网;  

    2、所需要图标加入购物车 ;
    3、存储为项目;
    4、获取在线链接、生成在线链接;
    5、选择fontclass在线css模式;
    6、把在线链接粘贴到link标签;
    7、用.iconfont如上,在里边随意修改样式;
    8、在html中需要的位置写<i class="iconfont">此处写图标的编号&#...;</i>;

    demo:

      

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <link href="http://at.alicdn.com/t/font_1461119990_7929926.css" type="text/css" rel="stylesheet"/>
    <style>


    .iconfont{
    font-family:"iconfont";
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke- 0.2px;
    -moz-osx-font-smoothing: grayscale;
    padding-left:20px 
    }

    </style>
    </head>
    <body>
    <i class="iconfont">&#xe600;</i>

    </body>
    </html>

    二、离线调用方式

      此方法需要本地下载iconfunt官网demo,然后如下,

    切记要把demo里.ttf和.woff亮哥文件引入即可:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>

    @font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1461117480'); /* IE9*/
    src: url('iconfont.eot?t=1461117480#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff?t=1461117480') format('woff'), /* chrome, firefox */
    url('iconfont.ttf?t=1461117480') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('iconfont.svg?t=1461117480#iconfont') format('svg'); /* iOS 4.1- */
    }

    .iconfont {
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke- 0.2px;
    -moz-osx-font-smoothing: grayscale;
    }
    .icon-icon1460345725196:before { content: "e61d"; }
    </style>
    </head>
    <body>
    <div class="box">
    <i class="iconfont">&#xe600</i>
    </body>
    </html>

    一定一定要记得加link里面的链接~妥妥测了一晚上,蓦然回首才发现可爱的寄几一直没加链接!

    还有相当重要的一句话:这篇博客是转载的 只有下面两句是博主的原创  啊哈哈哈  原文作者:

    文艺范儿m

  • 相关阅读:
    39页第3题 求x的n次幂
    实验4-1 求花费电费的金额
    实验二利用循环计算多个圆柱体体积
    39页第一题 四则运算及其余数
    实验一计算圆的面积
    7-14
    第六章例6-3
    第六章例6-2
    第六章例6-1
    第五章例5-9
  • 原文地址:https://www.cnblogs.com/yuanguliang/p/8039254.html
Copyright © 2011-2022 走看看