首頁手記用字體在網頁中畫ICON圖標筆記總結

用字體在網頁中畫ICON圖標筆記總結

標簽：

Html/CSS CSS3

链接：https://icomoon.io
代码链接：
https://gitee.com/sxianyuan/codes/v2l43w89u0djzoqr1a6gh95

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用字体在网页中画ICON图标</title>
    <style type="text/css">
        li,ul{list-style:none}li{display:inline-block;margin:20px}a{display:block;margin:10px;text-decoration:none;color:#67006d;font-weight:700;font-size:18px}

        @font-face{
            font-family:"imooc-icon";
            src:url('fonts/icomoon.eot');/* IE9兼容模式 */
            src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* ie8 */
                url('fonts/icomoon.woff') format('woff'),
                url('fonts/icomoon.ttf') format('truetype'),
                url('fonts/icomoon.svg') format('svg');
            font-weight:normal;
            font-style:normal;  
        }
        .imooc-icon{
            font-family:"imooc-icon";
            font-style: normal;
            font-weight: normal;
            font-size: 100px;
            -webki-t-font-smoothing：antialiased;
            -moz-osx-font-smoothing：grayscale;
        }
        .imooc-1{
            content: "\e906";
        }
        .imooc-2{
            position: relative;
        }
        .imooc-2:before{
            content: "\e902";
        }
        .imooc-2:after{
            content: "\e903";
            position: absolute;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
    <h2>用字体在网页中画ICON图标</h2>
    <h4>链接：<a  target="_blank">https://icomoon.io</a></h4>
    <ul>
        <li><i style="color: red;" class="imooc-icon"></i></li>
        <li><i style="color: green;" class="imooc-icon"></i></li>
        <li><i style="font-size: 50px;" class="imooc-icon"></i></li>

        <li><i class="imooc-icon"></i></li>
        <li><i class="imooc-icon"></i></li>
        <li><i class="imooc-icon"></i></li>

        <li><i class="imooc-icon imooc-1"></i></li>
        <li><i class="imooc-icon imooc-2"></i></li>
        <li><i class="imooc-icon imooc-3"></i></li>
    </ul>
    <h4>参考链接</h4>
    <a >http://www.iconfont.cn</a>
    <a >http://fontello.com/</a>
    <a >http://fontawesome.io/</a>
    <a >http://flowerboys.cn/font/</a>
    <a >http://www.w3cplus.com/css3/how-to-turn-your-icons-into-a-web-font.html</a>
</body>
</html>

點擊查看更多內容