使用font swesome图标

最新推荐文章于 2022-10-25 10:41:11 发布

plds

最新推荐文章于 2022-10-25 10:41:11 发布

阅读量950

点赞数

分类专栏： html5 文章标签： html5 css

html5 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

!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>