As stated in the title, i would like to use bootstrap 5 icons in a bootstrap 4 prject.
That because i have a legacy web application that use bootstrap 4 + font awesome, and i need to make that web application to work in tandem with a bootsrap 5 web application.
Bootstrap 4 and 5 have a similar look and feel, so no issue about apperance, but the icon set are differnet and that is a problem.
Bootstrap Icons and the Bootstrap library don't have any link. They are independent of each other so there is no problem in using them together, and there is no Bootstrap Icons version 5. The latest Icons version is v1.9.0.
Given below is an example where both bootstrap v1.9.1 Icons and Bootstrap v4.6.2 library are used.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.9.1/font/bootstrap-icons.min.css" rel="stylesheet"/>
<div class="alert alert-primary" role="alert">
This is a Bootstrap icon v1.9.1 in a Bootstrap 4 alert component. <i class="bi bi-android2"></i>
</div>
Related
I am using bootstrap 3.3.7 and there are these 2 icons in FontAwesome which I need in Glyphicon:
fa fa-long-arrow-up
fa fa-long-arrow-down
Been trying several methods from StackOverFlow like icomoon but I cant understand as I dont have enough experience in CSS/font things. Can anyone help?
Simply add the following cdn into your header:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
Alternatively, you can use these bootstrap glyphicons:
glyphicon glyphicon-arrow-up //For the Up Arrow.
glyphicon glyphicon-arrow-down //for the Down Arrow.
is there any compatibility issues i should be aware of ?
I have my webapp built with jquery mobile 1.4, yet for some pages bootstrap give me lot more control over css so that i can make my webapp also works for pc with wider views.
what i did was i used bootsrap custom builder to compile a version of bootstrap except for typographies, -because bs typography change the size of headers which mess jqm navbars and buttons.
i then included bootstrap on top of my css style sheets
<link rel="stylesheet" href="http://localhost/ehit/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://localhost/ehit/assets/css/jquery.mobile-1.4.3.min.css" />
<link rel="stylesheet" href="http://localhost/ehit/assets/css/jquery.mobile.theme-1.4.3.min.css" />
so that jqm styles would have upper hand to overwrites what ever rules it want over bootstrap.
yet before i start diving deep and coding stuff. i was wondering is this enough to get them to play nice together or is there other issues i should fix first ?
I use Bootstrap v3.1.1 (http://getbootstrap.com) and I want to use icon-message-* from the icons that is listed here , but there is no such classes in bootstrap. how should I use them?
I addedd this lines to head part:
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
and this is the code that I want to use... but there is no css class for "icon-message-new"
<span class="glyphicon icon-message-new"></span>
Hers is the message icon in Bootstrap:
<i class="glyphicon glyphicon-envelope"></i>
I will recommend to use Fontawesome
http://fontawesome.io/icons/
rather than Bootstraps's Glyph-icon . Font awesome has 479 icons free to use.
Bootstrap doesn't provide the full glyphicons. It has included just 200, and the one you refer to is not listed at the ones bootstrap supports (see the http://getbootstrap.com/components/#glyphicons link fo those details)
To get the complete glyphicons you want, grab them from Github. It's even listen on the page you linked us too.
https://github.com/marcoceppi/bootstrap-glyphicons
Bootstrap 3 CDN's glyphicon is not showing up in firefox. It will show in Chrome,Safari and Internet explorer.
I am loading boostrap cdn with the follwing:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
rel="stylesheet">
Below is the page with the glyphicon: (it is to the right of the grey list items)
http://www.jussbuss.tv/testing/jbresponsive
See https://github.com/FortAwesome/Font-Awesome/issues/2044 and https://github.com/MaxCDN/bootstrap-cdn/issues/196
It should be fixed now, try clearing your cache.
I am primarily a java developer but in the current project I will be doing the UI part also and I am thinking of using twitter bootstrap 3.0 version. I know for icons it comes with glyphyicons but today I came to know about something called font awesome 3.2 as well for icons which is considered to be better than the glyphyicons. However I noticed that font awesome 3.2 has been designed and is widely used with previous version of twitter bootstrap 2.3.2.
Does anyone know if twitter bootstrap 3.0 will also support the font awesome 3.2? If so, what will have to do if anything apart from including the css files correctly?
Thanks a lot for your help in advance.
Nothing is preventing you from integrating Font Awesome, just follow the documentation:
http://fortawesome.github.io/Font-Awesome/get-started/
Hint - Add this to your <head>:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
I am also having a problem with font awesome 4.0.3 and twitter bootstrap 3.0.2.
Sometimes they work and sometimes not.
There seems to be an "Issue" on github about it at
https://github.com/FortAwesome/Font-Awesome/issues/940