glyphicons

问题 I am doing an app with angular-cli and bootstrap4, but when I do some references to Glyphicons, the icons don´t appear. For example, when I add the following code: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button> I did the bootstrap installation in my angular project with: $ npm install --save bootstrap@4.0.0-alpha.6 I should make any extra step to have the Glyphicons in bootstrap? Do I should install

问题 I have a glyphicon as such: <div class="col-xs-4 col-sm-2"> <span class="glyphicon glyphicon-circle-arrow-up glyphicon-large"></span> </div> .glyphicon-large { min-height: 260px; font-size: 35px; width: 1em; display: block; top: 50%; margin: -0.5em auto 0px; } The glyphicon won't align to the center, vertically. When I open firefox, inspect element, and toggle off/on the top 50% rule, it suddenly works. How come? 回答1: Browser Bug Explanation According to MDN on top: For relatively positioned

问题 Is there a way to reduce the "weight" of Glyphicons? I am using the "ok" Glyphicon <span class="glyphicon glyphicon-ok"></span> which displays like this: Is there any way to reduce the weight to produce a thinner tick without reducing the font size? Changing the font-weight to lighter has no effect whatsoever. 回答1: Using white stroke is a way to do it -webkit-text-stroke: 2px white; 回答2: You could apply the font-weight property on ::before pseudo element to alter the font-weight: .glyphicon {

问题 Using TB, is it possible to style the radio or checkbox so that it shows a glyphicon instead of the default style for radio or checkbox? I want to use a glyphicon glyphicon-star to indicate unchecked, then glyphicon glyphicon-star-empty to indicate checked. 回答1: On the official website, the javascript section has examples of styling groups of checkboxes and radio buttons as buttons groups. It's under the buttons section here. Instead of having text inside the button that reads "Option 1", you

问题 I'm using Bootstrap 3 in my project and I'm using FontAwesome icons library instead of bundled Glyphicons. The problem is that I have some third-party components that rely on Glyphicons and I don't want to change their HTML. I'm including font-awesome via Bower and SASS + Compass (SCSS). Is it possible to replace Glyphicons with FontAwesome without changing the HTML and applying another CSS classes? 回答1: You can use the following approach to overload Glyphicon CSS classes with FontAwesome

问题 I am trying to underline with one line the <a> and the <span> I want it all to be a link with an underline. It leaves a small space between the word and the span, but it shouldn't. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" > <a href="#" role="button"> Saber mais <span class="glyphicon glyphicon-menu-right size"></span> <span class="glyphicon glyphicon-menu-right size segundoGlyph "></span> </a> Edit 1: And when the text size is higher

问题 I've bought the full Glyphicons PRO package and want to use it with Bootstrap 3. However, I can't seem to find comprehensive documentation on how to do this. The Glyphicons site lacks a "How to use section" and an accompanying PDF isn't much help either - it was mentioning a glyphicons.css file that wasn't part of the download package... Any help on how to make this replacement is much appreciated. 回答1: In your bootstrap folder is a fonts folder (mostly in the CSS folder) that contains the

问题 I am working in Bootstrap 3 and am trying to get a calendar icon inside the right hand side of the input box. My html looks like this: <div class="col-md-12"> <div class='right-inner-addon col-md-2 date datepicker' data-date-format="yyyy-mm-dd"> <input name='name' value="" type="text" class="form-control date-picker" data-date-format="yyyy-mm-dd"/> <i class="fa fa-calendar"></i> </div> </div> I have tried position: absolute like this: .right-inner-addon i { position: absolute; right: 5px; top

问题 I am trying to use bootstrap glyphicons in my angular2 app. I have installed bootstrap using the command npm install bootstrap --save My code snippet is <button *ngIf="pos.name == uname" type="button" class="btn btn-default btn-sm delete" (click)="DeleteBulletin();"> <span class="glyphicon glyphicon-trash glyph"></span> Delete </button> I have included bootstrap in my styleUrls- styleUrls: ['node_modules/bootstrap/dist/css/bootstrap.min.css', 'app/home.component.css'] The glyphicon appears as

问题 I am a beginner in web development and I recently started working with Twitter Bootstrap, I know it uses Glyphicons which I already know how to use. But I also came across Font Awesome which says that it is built for Bootstrap. What are the differences between the two? I mean is one an alternative for the other? Or should you use them in different places? 回答1: In Bootstrap 2.x.x Glyphyicons were in image format, hence you can't increase the size, change the color, background-color, etc easily