阿里字体图标的使用demo（之前一直下载png使用，感觉颜色是短板，今天抽空研究一下，方便项目中使用）

阿里图标默认生成：三种格式： Unicode+Font class+Symbol，demo使用的是 Unicode

操作步骤：

1.搜索自己需要的图标，

2.添加到项目

3.复制代码（这里复制的是font-face的代码）

4.加入项目中的所有图标下面都会有一个代码，类似：

5.其他按照demo格式复制就可以了，fz20是自己定义的，您也可以自己定义颜色控制等等。

直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <meta charset="UTF-8">
    <meta name="Author" content="haley">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>字体图标的使用demo</title>
    <style>
        /*线上font-face*/
        @font-face {
            font-family: 'iconfont';  /* project id 207411 */
            src: url('//at.alicdn.com/t/font_ndesiphink8uayvi.eot');
            src: url('//at.alicdn.com/t/font_ndesiphink8uayvi.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_ndesiphink8uayvi.woff') format('woff'),
            url('//at.alicdn.com/t/font_ndesiphink8uayvi.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_ndesiphink8uayvi.svg#iconfont') format('svg');
        }
        .iconfont{
            font-family:"iconfont" !important;
            font-size:30px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
            color:#fff;
        }
        .iconBox>p{
            background: #00AEEF;
            padding:20px 10px;
            color:#fff;
            border:1px solid transparent;
        }
        .iconBox>p:hover{
            background: #ffF;
            border-color:#00AEEF;
            color:#00AEEF;
        }
        .iconBox>p:hover .iconfont{
            color:#00AEEF;
        }
        .fz20{
            font-size: 20px;
        }
        .fz50{
            font-size: 50px;
        }
        .fz100{
            font-size: 100px;
        }

    </style>
</head>
<body>
<div class="iconBox">
    <p><i class="iconfont">&#xe6c3;</i> 英文</p>
    <p><i class="iconfont">&#xe6c1;</i> 中文</p>
    <p class="fz20"><i class="iconfont fz20">&#xe600;</i> 搜索 font-size:20px</p>
    <p class="fz50"><i class="iconfont fz50">&#xe600;</i> 搜索 font-size:50px</p>
    <p class="fz100"><i class="iconfont fz100">&#xe600;</i> 搜索 font-size:100px</p>
</div>
</body>
</html>

 

posted @ 2016-12-22 14:40  HALEY168  阅读(803)  评论(1)  编辑  收藏  举报