字体图标

最新推荐文章于 2024-07-28 18:42:51 发布

我的哥哥呦

最新推荐文章于 2024-07-28 18:42:51 发布

阅读量190

点赞数

分类专栏： H5C3 文章标签： font-face font-family content 字体图标

本文链接：https://blog.csdn.net/qq_20497071/article/details/97623967

版权

H5C3 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('../fonts/iconfont.eot'); /* IE9*/
            src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
            url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }
        .myFont{
            font-family: iconfont;
        }
        /*笑脸*/
        .smile::before{
            content: "\e641";
            color: red;
            font-size: 50px;
        }
        /*输出*/
        .output::before{
            content: "\e640";
            color: blue;
            font-size: 50px;
        }
    </style>
</head>
<body>
<!--使用字体图标的时候，得自己指定你想使用的图片-->
<span class="myFont smile"></span>
<span class="myFont output"></span>
<span class="myFont">&#xe642;</span>
</body>
</html>