I'm trying to use Glyphicons with Bootstrap 3 and am finding that some of them don't work.
For example, out of these three glyphicons, the first one doesn't work (it shows up as am empty box):
<i class="glyphicon glyphicon-bell"></i>
<i class="glyphicon glyphicon-cog"></i>
<i class="glyphicon glyphicon-ban-circle"></i>
JSFIDDLE: http://jsfiddle.net/WE6BS/
I'm using the CDN versions of the Bootstrap JS, CSS, and Glyphicons, as well as copying code directly from the Glyphicons example page, so what am I doing wrong?
There is most likely an issue with inclusion of Glyphicons on BootstrapCDN 3.0.0 version. When 3.0 was released the glyphicons were in a separate repo, and then combined into the Bootstrap baseline again later around 3.0.1.
The latest 3.0.3 seems to work fine: http://jsfiddle.net/EhwT3/
Related
I upgraded from Fontawesome 3 to Fontawesome 5.
Now I got several problems. If I am just linking the font-awesome.min.css in the head, the icons are not loading. I just see squares.
If I link the all.css and tha all.js in the head, I works. So the icons are shown correctly. But everytime, I am clicking any Button and the page is realoding, it takes around half a second to reload the icons. In the previous Version it worked without the js and the icons weren't reloading at all.
I am not sure why it is behaving like this. Maybe because all the <i ...> are converted into svg?
Do you have any hints what I can do?
The class names changed.
In FontAwesome 3:
<i class="icon-thumbs-up"></i>
In FontAwesome 5:
<i class="fas fa-thumbs-up"></i>
You should look them up here and change them manually.
I am working on a WordPress theme and tried many times to add fontawesome icons. Finally, by adding different fontawesome CSS files I found few of them works well but not others.
Please tell me why others do not work and which one should I use.
all.min.css file shows this result.
I have used the different to see which one works. "fa/far/fad/fas"
<div class="fa-3x">
<i class="fad fa-camera"></i>
<i class="fas fa-fire-alt"></i>
<i class="fa fa-bus-alt"></i>
<i class="far fa-fill-drip"></i>
</div>
And the functions.php file where I have added the CSS file to include in the header file.
...
//FontAwesome CSS file
wp_enqueue_style( 'epostlite-fontawesome', get_template_directory_uri() . '/fontawesome/css/all.min.css' );
...
I used version 5
Why "fad" and "far" shows a rectangle instead of the icon?
Why "fontawesome.min.css" and "brands.min.css do not work?
Why "fad" and "far" shows a rectangle instead of the icon?
Because fad & far are pro icons so both will not work in free version.
Why "fontawesome.min.css" and "brands.min.css do not work?
This both will work but you need to add one more css, which is
wp_enqueue_style('font-awesome-solid', get_template_directory_uri() . '/assets/css/font-awesome5/solid.min.css');
after adding solid.min.css you will get same result as all.min.css
But preferable is if you are using font awesome version 5 then just use all.min.css, no need to include all of them differently. you can check it from here.
Instead adding more & differrent kind of css you can fix the problem in less then 2 mins. Simple replacement of /font-awesome/5.13.0/css/fontawesome.min.css with /font-awesome/5.13.0/css/all.min.css and also font-awesome/5.13.0/js/fontawesome.min.js with /font-awesome/5.13.0/js/all.min.js can fix this issue. I prefer to use cdnjs
https://youtu.be/_GV_pEmLCLU
I use glyphicon icons in my project, I use bootstrap 3.0.0 .
I have problem to display glyphicon-option-vertical icon, it just not displaed!
Here how I use it:
<span class="glyphicon glyphicon-option-vertical"></span>
While all other icons displayed fine.Any idea why this specific icon is not displayed?
Probably it's not declared in your Bootstrap CSS file. You might need to download the latest bootstrap from GitHub. Here you can find the fonts files
https://github.com/twbs/bootstrap/tree/master/fonts
I have used a bootstrap pop over in ng-repeat. Below code snippet for the same
<div class="useBootstrap col-sm-2" data-toggle="popover" data-container="body" data-content="AdditionalContents to be shown" data-trigger="click hover">
{{ row.FileName | limitTo: 15 }}{{row.FileName.length > 15 ? '...' : ''}}
</div>
I have a bootstrap version *!
* Bootstrap v3.3.4 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc. in my application
If I include a lower version of bootstrap - It renders perfectly.The 1st image when including 3.0, 2nd image if i use 3.3, How can i make it work in 3.3 version because I cannot change the version of bootsrap in my application now just for this pop up.
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
I see that you are using the Vanilla Bootstrap popovers. I tried using them too, but I never achieved my desired outcome. So, I investigated an alternative, Angular BootstrapUI (otherwise known as BootstrapUI), which solved most of my problems.
This probably isn't the answer you're looking for, but I would suggest trying out the BootstrapUI popovers. I've found the upside to using these popovers makes integrating templates much easier, and they don't rely on extraneous jQuery. The downside is that their style is more difficult to customize. I still haven't figured out how to have popovers with different styles in BootstrapUI. In Vanilla Bootstrap, customizing popover styles is fairly trivial.
I haven't had any problems with Vanilla Bootstrap's JS, but for now you should stick to a version that is most compatible with your app.
I'm using Twitter Bootstrap 3.3.5. When creating a btn-primary in my html like:
<button type="submit" class="btn btn-primary">Button Text</button>
i'm getting a different result as stated on the bootstrap page. I'm talking about the gradient that the button has when I'm using bootstraps button inside my page. When expecting the the element with Chrome's Dev-Console I can see that the gradient comes from the theme.less file and of course I can manipulate it. But shouldn't it be by default like on the bootstrap website?
I found out that removig the
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
tag from my html-head helped already.
I've installed bootstrap via bower. Would be nice if one could "opt-out" the theme via config instead of deleting the theme files or the link tag in head manually.