fontawesome 图标字体

 

|-- 引入fontawesome 字体

<link rel="stylesheet" href="./css/font-awesome.min.css">

 

首先引入CSS文件：
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
然后用 <i class="fa fa-XXXX"></i> 输出图标。也可以元素类的css类属性
比如用 <i class="fa fa-home"></i> 可输出 

<i class=" icon-spin">卍</i> Spinner icon when loading content...

 

字符的使用方法 unicode

字符的unicode码
http://fortawesome.github.io/Font-Awesome/cheatsheet/
每一个字符,都有独特的unicode码
使用字符的unicode码来引用这个字符
<style>
div {
font-family: 'FontAwesome';
}
</style>
</head>
<body>
<div>&#xf042;</div>
</body>

 利用伪类选择器方法

利用伪对象选择器,在a标签[9条评论]前加上小图标
注意:在css中写,跟标签中写法不同,同样是16进制
标签中是 &#xf
css中是 \f

<style>
div {
font-family: 'FontAwesome';
}
a::before {
font-family: 'FontAwesome';
content: "\f042";
}
</style>
</head>
<body>
<div>&#xf042;</div>
<a href="#">9条评论</a>
</body>

 

p:last-of-type::before {
font-family: 'FontAwesome';
content: "\f18a";
}

 

 

 

直接使用 fontawesome

看一个这个类干了些什么 -> 类名::before{content:''};
所有的图标:
http://fortawesome.github.io/Font-Awesome/icons/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-hand-paper-o">这是一个图标</i>
</body>
</html>


并不一定要用i标签,只要在标签中加入这个类就可以使用
<body>
<i class="fa fa-hand-paper-o">我是小手</i>
<a href="#" class="fa fa-comment">9条评论</a>
</body>

 

使用fontawesome

awesome字体
.catlink::before {
font-family: 'FontAwesome';
padding: 0px 4px;
content: "\f07c";
}
.comment::before {
font-family: 'FontAwesome';
padding: 0px 4px;
content: "\f075";
}
<span><a href="#" class="catlink">文章分类</a></span>
<span><a href="#" class="comment">文章评论条目</a></span>

 

 

 

 

更多内容请访问 http://fontawesome.io/

posted @ 2017-04-08 19:38  silvercell  阅读(1820)  评论(0)    收藏  举报