码迷,mamicode.com
首页 > 其他好文 > 详细

iconfont在线链接使用方法

时间:2016-05-12 20:01:07      阅读:2466      评论:0      收藏:0      [点我收藏+]

标签:


基础流程就不多赘述,直接到http://www.iconfont.cn/官网看,下面主要介绍在线链接使用:

1生成项目,选中右边的Font Class,

技术分享

2.复制链接;  //at.alicdn.com/t/font_1462780150_442243.css   (类似如此)

3.导入到代码中 <link rel="stylesheet" href="http://at.alicdn.com/t/font_1462780150_442243.css">

4.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1462780150_442243.css">
</head> 
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont" style="color:red;"></i>
                    <div class="name">发现</div>
                    <div class="code">&#xe600;</div>
                    <div class="fontclass">.faxian</div>
                </li>
            
        </ul>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1462780150_442243.css">
</head> 
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont" style="color:red;"></i>
                    <div class="name">发现</div>
                    <div class="code">&#xe600;</div>
                    <div class="fontclass">.faxian</div>
                </li>
            
        </ul>
    </div>
</body>
</html>


5.最后效果

技术分享

iconfont在线链接使用方法

标签:

原文地址:http://blog.csdn.net/jinkingliao/article/details/51353937

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!