关闭

css自定义字体(图标)-有些图标不要在P图了

545人阅读 评论(0) 收藏 举报
分类:

Font Awesome 官网:http://fortawesome.github.io/Font-Awesome/

优点:

1.方便,想用一些小图标时,再也不需要去找图片了

2.量多,有超过500多种图标可供选择

3.自定义,图标的颜色可自定义(设置color即可),图标大小可以设置,可设置阴影,还可以加animation动画

4.只要你能想得到的都可以试试

如何使用:

1.首先需要的将字体文件与css文件放到相应的文件里

2.然后在想用使用图标的地方加上样式名(一般用a)

3.如下代码

案例链接:http://pan.baidu.com/s/1gdm1Tbt

<!DOCTYPE HTML">
<html>
 <head>
  <title> New Document </title>
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  <style type="text/css">
	*{
		margin:0px;
		padding:0px;
	}
	a{
		text-decoration:none;
		display:block;
	}
	#box{
		margin:20px auto;
		width:800px;
		position:relative;
	}
  </style>
 </head>

 <body>
	<a href="#" class="fa fa-2x fa-heart" style="color:red;">红色-心</a>
	<a href="#" class="fa fa-2x fa-fighter-jet" style="color:green;">绿色-战斗机</a>
	<a href="#" class="fa fa-2x fa-train" style="color:blue;">蓝色-火车</a>
 </body>
</html>
效果如下:



下面是所有图标的展示,使用时加上图标后面的样式名称即可:

生成方法参考链接:http://pan.baidu.com/s/1dDsBBO1


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:68082次
    • 积分:950
    • 等级:
    • 排名:千里之外
    • 原创:31篇
    • 转载:70篇
    • 译文:0篇
    • 评论:0条
    文章分类