html - 如何制作 bootstrap glyphicon 圆形？

Question

我想制作 bootstrap glyphicon 圆形我在类 glyhphicon-menu 中添加了边框半径，但我没有看到任何事情发生，知道如何使用 bootstrap 或 css 实现它吗？

main.html

<span  type="button" class="glyphicon glyphicon-th-list glyhphicon-menu" ng-click="isCollapsed = !isCollapsed" id="treelist"></span>

主.css

.glyphicon.glyhphicon-menu {
  font-size: 30px;
  border-radius: 50%;
}

Answer 1

您只需添加 overflow:hidden 以便它剪裁超出边界的文本。

.glyphicon.glyhphicon-menu {
  font-size: 30px;
  border-radius: 50%;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<span  type="button" class="glyphicon glyphicon-th-list glyhphicon-menu" ng-click="isCollapsed = !isCollapsed" id="treelist"></span>