Question

我想在Bootstrap buttons中插入图标，但我不知道该怎么做。我试图在互联网上找到一些东西Bootstrap official website，但我找不到任何东西：

这是按钮和图标。

.btn {
    display: inline-block;
    padding: 9px 12px;
    padding-top: 7px;
    margin-bottom: 0;
    font-size: 13px;
    font-family: bpg;
    line-height: 20px;
    color: #5e5e5e;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: #d1dade;
    -webkit-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-image: none !important;
    border: none;
    text-shadow: none;
    box-shadow: none;
    transition: all 0.12s linear 0s !important;
}

.btn-cons {
    margin-right: 5px;
    min-width: 120px;
    margin-bottom: 8px;
}

.btn-primary {
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd;
}

.btn-primary {
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
}

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
</head>
<body>

  <!--Button-->
    <button type="button" class="btn btn-primary">Icon place</button>
  
    <br/><br/>
  
  <!--Icon-->
    <img src="https://s30.postimg.org/xjjlfotlt/icon4.png" alt="Icon"/>

</body>
</html>

Answer 1

试试这个：

<button class="btn btn-default">
     <img src="https://s30.postimg.org/xjjlfotlt/icon4.png"/> Icon
</button>

Answer 2

更改此<button type="button" class="btn btn-primary">Icon place</button>

进入这个

  <button type="button" class="btn btn-primary">
     <img src="https://s30.postimg.org/xjjlfotlt/icon4.png" alt="Icon"/>
  </button>

你可能看不到任何东西，因为你的图片链接是空的。

如何在Bootstrap按钮中插入图标

2 个答案: