I can't figure out how to translate this from Bs3 to Bootstrap 4:
<div class="input-group date">
{% include "bootstrap_datepicker_plus/input.html" %}
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I read that gyphicon has been dropped so I replaced it with fa fa-calendar and added the appropriate stylesheet.
I can't get that button working - which was the glyphicon
As per your question I think you are using Font Awesome Icons
For including font-awesome library follow following link:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Even as per latest Font awesome CDN package 5
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
class for the calendar has been renamed to far fa-calendar as shown in link
It should be like this. Please, note, you haven't stated which version of font-awesome you are using. I assumed this
<div class="input-group date">
{% include "bootstrap_datepicker_plus/input.html" %}
<span class="input-group-addon">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
You may use feather icons from here (Github link here) instead of glyphicons in Bootstrap 4. The following code example might be of some help to you.
<html>
<head>
</head>
<body>
<div data-feather="calendar">Calendar</div>
<!-- Icons -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace()
</script>
</body>
Related
I have quick question of using fontawesome icon in HTML.
I've tried the solutions to import the kit and link the all.css
<script
src="https://kit.fontawesome.com/"my kit id".js"
crossorigin="anonymous"
></script>
...
<i class="fa-solid fa-xmark"></i>
<script src="css/all.css"></script>
...
<i class="fa-solid fa-xmark"></i>
but it still not worked.I don't understand how to solve this problem
You can easily to use font-awesome by using CDN:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
It should work!
I added the font-awesome CDN Html link from the website and placed in the head, and still, the icon wouldn't show. I'm new to Html and need specific instructions on how to fix this.
I even tried downloading it and linking the file locally but that didn't work.
<head>
<title>Social Media</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<ul>
<li>
<i class="fas fa-search"></i>
</li>
</ul>
The problem here is that the icon fas fa-search is from Fontawesome version 5, but you are loading Fontawesome version 4.7.
Fontawesome 4.7 has instead the fa fa-search icon.
<head>
<title>Social Media</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<ul>
<li>
<i class="fa fa-search" style="font-size:30px;"></i>
</li>
</ul>
Please check first what font you are using i mean latest or old there are old 4.7.0 there are different between fa and fas
Issue with font awesome version 5. Some icons are not getting rendered. Instead shows animation with question mark and exclamation. If I use version 4 and css it gets rendered. Anyone have this issue ?
<!DOCTYPE html>
<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
</head>
<body class="body">
<i class="fa fa-google-plus-square"></i>
<i class="fas fa-google-plus-square"></i>
<i class="fas fa-check-square"></i>
</body>
</html>
Here the google-plus-square icon is not rendering. This is how it appears in the browser
Because you are calling wrong class
**This Is Wrong**
<i class="fa fa-google-plus-square"></i>
<i class="fas fa-google-plus-square"></i>
**For Font Awesome 5 Instead of That USe THis**
<i class="fab fa-google-plus-square"></i>
Search Icon From Here
https://fontawesome.com/icons?d=gallery
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Use this link instead of script
Another reason your font-awesome icons are not rendering could be that you are trying to use a Pro icon when you have the fontawesome-free package.
For example, in Font Awesome 6, to use <i class="fa-solid fa-code"></i>, fontawesome-pro package is required.
I've tried re-coding it different ways and I'm not sure why it's not working. I'm trying to make a button that when pressed will send the user to Github all while having a font awesome icon.
<a href="https://github.com/"> <button type="submit"><i class="fa fa-github"
aria-hidden="true">GitHub</i></a>
Try this:
You should have the font awesome installed locally or by CDN
By CDN
You should put this code on the <header>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' />
HTML
<button onclick="window.location.href='https://github.com/'"><i class="fa fa-github" aria-hidden="true"></i>GitHub</button>
OR
<i class="fa fa-github" aria-hidden="true"></i>GitHub
<html>
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' />
</head>
<body>
<a href="https://github.com/"> <button type="submit"><i class="fa fa-github"
aria-hidden="true">GitHub</i></button></a>
</body>
</html>
So because I was writing this in codepen I had to add a target="_blank" to open the page in a new tab and that fixed the issue.
Thank you for the help
Based on this code I cannot retrieve any glyphicons in Bootstrap 2.3.2.
What am I missing ?
Thanks!
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap.icon-large.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<a class="btn btn-small" href="#">
<i class="icon-large icon-chat"></i>
</a>
<a class="btn btn-small" href="#">
<i class="icon-large icon-phone"></i>
</a>
<img src="glyphicons.png">
</body>
</html>
bootstrap 2.3.2 uses a png sprite in order to call its icons.
if you'll look inside bootstraps css file you'll see that it's looking for this image under:
url("../img/glyphicons-halflings.png")
whereas your image is on the same level as your css.
either change your png's location to this one (put it in the 'img' folder), or change the css file itself.
Mike.