!DOCTYPE html>
<html>
<head>
<title>use font awesome</title>
</head>
<body>
<style>
@font-face {
font-family: 'FontAwesome';
src: url('font/fontawesome-webfont.eot?v=4.2.0');
src: url('font/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('font/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('font/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('font/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
background-color: #272822;
position: absolute;
}
.main-mesg{
position: absolute;
top: 20px;
left:20px;
width: 200px;
}
a{
text-decoration: none;
color: #742385;
font-size: 25px;
display: block;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-signal:before {
content: "\f012";
}
.icon-cog:before{
content: "\f013";
}
.icon-home:before{
content: "\f015";
}
.icon-file:before{
content: "\f016";
}
.icon-download:before{
content: "\f01a";
}
</style>
<div class="main-mesg">
<a href="#"><i class="fa icon-signal"></i><span>signal</span></a>
<a href="#"><i class="fa icon-cog"></i><span>cog</span></a>
<a href="#"><i class="fa icon-home"></i><span>home</span></a>
<a href="#"><i class="fa icon-file"></i><span>file</span></a>
<a href="#"><i class="fa icon-download"></i><span>download</span></a>
</div>
</body>
</html>
使用font swesome图标
最新推荐文章于 2022-10-25 10:41:11 发布