美文网首页
icomoon字体图标的使用方法

icomoon字体图标的使用方法

作者: 周星星的学习笔记 | 来源:发表于2021-01-23 21:25 被阅读0次

    一、访问网址:https://icomoon.io/

    二、选择icon图标

    三、下载图标

    image.png

    四、使用

    1.下载下来,解压之后,进入目录中,copy里面的fonts目录到工程中。


    image.png

    2.打开demo.html

    3.编辑代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>icon font test</title>
        <style>
            @font-face {
                /*声明字体  引用字体*/
                font-family: "icomoon";
                /*我们自己起名字可以*/
                src: url('fonts/icomoon.eot?7kkyc2');
                src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
                    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
                    url('fonts/icomoon.woff?7kkyc2') format('woff'),
                    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
                font-style: normal;
                /*倾斜字体正常*/
            }
    
            span {
                font-family: "icomoon";
                font-size: 100px;
            }
        </style>
    
    </head>
    
    <body>
        <!-- 将复制的放入这里 -->
        <span></span>
    </body>
    
    </html>
    

    4.结果显示

    相关文章

      网友评论

          本文标题:icomoon字体图标的使用方法

          本文链接:https://www.haomeiwen.com/subject/aviszktx.html