Question

我想更改glyphicon-comment的高度和宽度以及如何在glyphicon-comment.i中显示文本，使用bootstrap中存在的预定义注释。当我尝试使用内联更改高度和宽度时风格它不起作用。但如果我改变评论的颜色它正在改变。

这是我的代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="panel panel-info">
      <div class="panel-heading">Learn by doing</div>
      <div class="panel-body">Each computer has a built-in instruction set that it knows how to execute by design.
          <form id="myForm">
              <span class="glyphicon glyphicon-comment"  onclick="radiotruehintbox()"></span> 
              <div class="radio">
                <label><input type="radio" id="true" onclick="radiotruehintbox()">True</label>
              </div>
              <div class="radio">
                <label><input type="radio" id="false" onclick="radiofalsehintbox()">False</label>
              </div>
            <div class="alert alert-success alert-dismissible" id="truebox" style= display:none>
                  <div class="close" data-dismiss="alert" aria-label="close">&times;</div>
                  <strong>&#10004;</strong> This alert box could indicate a successful or positive action.
            </div>
            <div class="alert alert-danger alert-dismissible" id="falsebox" style= display:none>

                <div class="close" data-dismiss="alert" aria-label="Close">&times;</div>
                <strong>&#10008;</strong> This alert box could indicate a dangerous or potentially negative action.
              </div>
          <p>computer uses intelligence to execute instructions.</p>
          <span class="glyphicon glyphicon-comment" onclick="radiofalsehintbox()"></span></p>
              <div class="radio">
                <label><input type="radio" id="true_2" onclick="radiohintbox()">True</label>
              </div>
              <div class="radio">
                <label><input type="radio" name="optradio">False</label>
              </div>
          </form>
          <button type="button" class="btn btn-primary btn-md" OnClick="ResetClick()" >Reset </button>     
      </div>
  </div>    
</div>

<script>
function radiotruehintbox() {
document.getElementById("false").checked = false;
document.getElementById('falsebox').style.display='none';
document.getElementById('truebox').style.display='block';

}
function radiofalsehintbox() {
document.getElementById("true").checked = false;
document.getElementById('truebox').style.display='none';
document.getElementById('falsebox').style.display='block';


}
function ResetClick() {
    document.getElementById("myForm").reset();
    document.getElementById("truebox").reset();
    document.getElementById("falsebox").reset();
}
</script>
</body>
</html>

Answer 1

使用字体大小来增加像这样的字形大小 -

.glyphicon-comment{
    font-size: 24px
}

你不能在一个字形中写字。

Answer 2

使用字体大小来增加引导程序图标的大小，

您无法单独增加高度或宽度。

.glyphicon-comment {
    font-size: 20px;
}

参考链接 - https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

希望这有帮助，

如何更改glyphicon-comment（Bootstrap）的高度和宽度

2 个答案: