FontAwesome⼀套绝佳的图标字体库和CSS框架
在bootstrap框架的使⽤中,字体图标必不可少,Font Awesome ⼀套绝佳的图标字体库和CSS框架,值得学习。
###使⽤⽰例 1:引⼊Font Awesome图标⽂件或者使⽤使⽤LESS或SASS的⽅法来⾃定义 Font Awesome 4.7.0 。
<link href="cdn.bootcss/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
您可以将Font Awesome图标使⽤在⼏乎任何地⽅,只需要使⽤CSS前缀 fa ,再加上图标名称。 Font Awesome是为使⽤内联元素⽽设计的。我们通常更喜欢使⽤ <i> ,因为它更简洁。 但实际上使⽤ <span> 才能更加语义化。
###代码⽰例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 font-awesome图标</title>
<link href="cdn.bootcss/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="cdn.bootcss/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="cdn.bootcss/jquery/2.1.1/jquery.min.js"></script>
<script src="cdn.bootcss/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> ;主页</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>  图书馆</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>  提交申请</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>  设置</a>
</div>jquery框架使用
</body>
</html>
###效果如下
90后前端妹⼦,爱编程,爱运营,爱折腾。 坚持总结⼯作中遇到的技术问题,坚持记录⼯作中所所思所见,欢迎⼤家⼀起探讨交流。