除了glyphicons 还可以如下方式引入图标:
http://www.bootcss.com/p/buttons/
Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。
BUTTONS SETUP
复制- <!-- Buttons 库的核心文件 -->
- <link rel="stylesheet" href="css/buttons.css">
- <!-- 当需要使用带下拉菜单的按钮时才需要加载下面的 JavaScript 文件 -->
- <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
- <script type="text/javascript" src="js/buttons.js"></script>
- <!-- 只有使用字体图标时才需要加载 Font-Awesome -->
- <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
一段可实现的代码案例:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>welcome to jitapuzi</title>
<link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/buttons.css" rel="stylesheet">
<!--有这两个link才可以正确显示图标-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
</head>
<body>
<main role="main" class="container">
<button class="button button-square button-tiny"><i class="fa fa-plus"></i></button>
<button class="button button-box button-tiny"><i class="fa fa-plus"></i></button>
<button class="button button-circle button-tiny"><i class="fa fa-plus"></i></button>
<button class="button button-primary button-square button-small"><i class="fa fa-plus"></i></button>
<button class="button button-primary button-box button-small"><i class="fa fa-plus"></i></button>
<button class="button button-primary button-circle button-small"><i class="fa fa-plus"></i></button>
<a href="http://www.bootcss.com/" class="button button-action">Go</a>
<a href="http://www.bootcss.com/" class="button button-action button-rounded">Go</a>
<a href="http://www.bootcss.com/" class="button button-action button-pill">Go</a>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
</body>
</html>