Bootstrap中怎样引入Buttons图标?

最新推荐文章于 2024-06-03 20:31:46 发布

周杰伦今天喝奶茶了吗

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量3.9k

点赞数 2

分类专栏： web前端

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

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

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

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

BUTTONS SETUP

复制

<link rel="stylesheet" href="css/buttons.css">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/buttons.js"></script>
<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>

周杰伦今天喝奶茶了吗

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap中怎样引入Buttons图标?

除了glyphicons 还可以如下方式引入图标：http://www.bootcss.com/p/buttons/Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。BUTTONS SETUP复制 &lt;!-- Buttons 库的核心文件 --&gt; &lt;link rel="stylesheet" href="css/buttons.css"&gt; &lt...
复制链接

扫一扫

专栏目录