字体图标使用教程-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体图标练习</title>
    <style>
        /*1.!/寻找项目中字体图标的连接代码*!*!*/
        @font-face {
            font-family: 'iconfont';  /* project id 395624 */
            src: url('//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.eot');
            src: url('//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.woff') format('woff'),
            url('//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.svg#iconfont') format('svg');
        }
        @font-face {
            font-family: 'iconfont';  /* project id 394512 */
            src: url('//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.eot');
            src: url('//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.woff') format('woff'),
            url('//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.svg#iconfont') format('svg');
        }
        @font-face {
            font-family: 'iconfont';  /* project id 395624 */
            src: url('//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.eot');
            src: url('//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.woff') format('woff'),
            url('//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.svg#iconfont') format('svg');
        }
        .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;
            color:red;
            font-size: 32px;
        }
    </style>
</head>
<body>
    <!--2.类名为iconfont-->
    <!--3.复制图标字体代码-->
    <!--4.导入阿里巴巴字体图标的压缩后的文件-->
    <i class="iconfont">&#xe626;</i>
    <i class="iconfont">&#xe60d;</i>
    <i class="iconfont">&#xe63c;</i>
    <i class="iconfont">&#xe600;</i>

</body>
</html>