欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

如何使用Bootstrap中的字体、图标等

程序员文章站 2022-05-25 19:05:45
...

除了glyphicons 还可以如下方式引入图标：

http://www.bootcss.com/p/buttons/

Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。

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

 

原文链接：https://blog.csdn.net/skyejy/article/details/79510165

相关标签： Bootstrap 字体 图标

上一篇： 前端字体图标的使用（阿里、icomoon）

下一篇： layui字体图标

推荐阅读