字体图标的使用

最新推荐文章于 2024-09-03 16:22:30 发布

大笨儿钟

最新推荐文章于 2024-09-03 16:22:30 发布

阅读量2k

点赞数

分类专栏：移动web 文章标签：字体 html

本文链接：https://blog.csdn.net/u014298440/article/details/75008567

版权

移动web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先上代码：
html文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<link href="font.css" rel="stylesheet" type="text/css"/>
<body>
 <header class="my-font icon-mobile">Come on</header>
<div class="container">
    <article class="icon-search3 my-font">
        fighting
    </article>
</div>
<footer class="my-font icon-unfold">don't run</footer>
</body>
</html>

css文件


@font-face {
    font-family: "my-font";
    src: url('icon/iconfont.eot?t=1499675870758'), /* IE9*/
    url('icon/iconfont.eot?t=1499675870758#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('icon/iconfont.woff?t=1499675870758') format('woff'), /* chrome, firefox */
    url('icon/iconfont.ttf?t=1499675870758') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('icon/iconfont.svg?t=1499675870758#iconfont') format('svg'); /* iOS 4.1- */
}
/*只要拥有这个类名，就可以使用定义好的样式*/
.my-font {
    font-family:"my-font" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-mobile:before { content: "\e638"; }

.icon-ipad:before { content: "\e7a7"; }

.icon-computer:before { content: "\e609"; }

.icon-search3:before { content: "\e7d1"; }

.icon-mobile1:before { content: "\e6cf"; }

.icon-arrowdropdown:before { content: "\e60a"; }

.icon-add:before { content: "\e6df"; }

.icon-packup:before { content: "\e749"; }

.icon-unfold:before { content: "\e74a"; }

这里开始说明一下：首先是css文件里面@font-face的意思，这里定义了你自己的字体名称，我这里取名叫my-font，也就是说以后想要用这个类型的字体直接 font-family里面设为my-font即可，具体样式可参考我上面的代码。然后由于我使用的是阿里的图标库，下面会有你选择下载的图标的类名代码，比如icon-mobile:before等等。

再看我代码中的html元素，要用到字体图标的地方，要加上自己的my-font类名，表示下面的font-falimy会使用自己定义的字体my-font，并且还要加上你想要引用的图标类名，具体可参考上述代码