iconfont在线链接使用方法

最新推荐文章于 2024-02-20 06:00:00 发布

踏雪寻春nice

最新推荐文章于 2024-02-20 06:00:00 发布

阅读量2.1w

点赞数 2

本文链接：https://blog.csdn.net/jinkingliao/article/details/51353937

版权

基础流程就不多赘述，直接到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">
    //补充(需加入这段css才能让图标显示)
 <style>
    .iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</style>
</head> 
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont faxian" style="color:red;"></i>
                    <div class="name">发现</div>
                    <div class="code">&#xe600;</div>
                    <div class="fontclass">.faxian</div>
                </li>
            
        </ul>
    </div>
</body>
</html>

5.最后效果

踏雪寻春nice

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
iconfont在线链接使用方法

基础流程就不多赘述，直接到http://www.iconfont.cn/官网看，下面主要介绍在线链接使用：1生成项目，选中右边的Font Class，2.复制链接； //at.alicdn.com/t/font_1462780150_442243.css （类似如此）3.导入到代码中<link rel="stylesheet" href="http://at.ali...
复制链接

扫一扫