2016-10-26 2 views
2

Ich möchte Bootstrap Glyphicon Runde Form machen Ich fügte Border Radius Klasse glyhphicon-menu, aber ich sehe nichts passiert, Irgendeine Idee, wie es mit Bootstrap oder CSS geschehen?Wie man bootstrap glyphicon Kreisform macht?

main.html

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

main.css

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

ein Try Element prüfen und sehen, ob es ein .glyphicon.glyphicon-Menü ist vor und versuchen, es dort zu ändern. – Jeff

+0

'.glyphicon.glyphicon-menu: before' ist nicht da und ich habe in chrome geändert, aber kein Ergebnis, ich sehe' font size' Eigenschaft geändert. – hussain

+2

Hat der Bereich eine Hintergrundfarbe oder einen Rahmen? – RMo

Antwort

0

Sie müssen nur overflow:hidden so hinzuzufügen, dass er streift der Text, der außerhalb der Grenze geht.

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