字体图标的使用

先上代码：
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，并且还要加上你想要引用的图标类名，具体可参考上述代码

秒客网

字体图标的使用

相关文章