Is it only me that cannot render bitcoin and facebook icons in version 5.0.8 ?
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css">
<i class="fa fa-btc"></i>
<i class="fa fa-bitcoin"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook-f"></i>
You also need to use the brands.css stylesheet in font-awesome 5.0.8. Additionally, you need to make sure your class names are up to date. Try the snippet below:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/brands.css" integrity="sha384-IiIL1/ODJBRTrDTFk/pW8j0DUI5/z9m1KYsTm/RjZTNV8RHLGZXkUDwgRRbbQ+Jh" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css" integrity="sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f+JpUOVdAiJ5P" crossorigin="anonymous">
<i class="fab fa-btc"></i>
<i class="fab fa-bitcoin"></i>
Alternatively, you can just use the all.css stylesheet to include all the styles
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<i class="fab fa-btc"></i>
<i class="fab fa-bitcoin"></i>
You need to load all the icon type as the bitcoin belong to the brand ones. As you can see below you can choose pack of icon you want to load: https://fontawesome.com/get-started/web-fonts-with-css
You also need to use fab not fa. https://fontawesome.com/how-to-use/web-fonts-with-css
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" >
<i class="fab fa-btc"></i>
<i class="fab fa-bitcoin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-facebook-f"></i>
This can fix the problem for all fontawesome font types 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. https://youtu.be/_GV_pEmLCLU
Related
I would like to make a combination of icons via FA stack but it does not work. I have pure example from documentation and it shows me only empty squares. Code looks like:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<span class="fa-stack" style="vertical-align: top;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x"></i>
</span>
and the result looks like on the picture below (last icon on the line).
What am I doing wrong?
Use the correct CDN which is the one of the V5 not the V4
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class="fa-stack" style="vertical-align: top;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x"></i>
</span>
I'm trying to create a social sharing module in my Java web application. I'm using this example from w3schools.
I already had fontawesome icons in the project but for some reason after adding the following code only either of them (social icons or old icons in the site) are working. They are showing square icons or no icons on switching with various cdn links of fontawesome css.
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css"
crossorigin="anonymous">
<!-- Load font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- The social media icon bar -->
<div class="icon-bar">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
<i class='fa fa-brain'></i>
<i class='fa fa-calculator'></i>
</div>
I've not added the css code from the example though. What am I doing wrong?
You are using few icons from fontawesome 5. for example fa-brain. You need to update css link and font classes accordingly.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous">
<!-- Load font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<!-- The social media icon bar -->
<div class="icon-bar">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google"></i>
<i class="fab fa-linkedin-in"></i>
<i class="fab fa-youtube"></i>
<i class="fas fa-calculator"></i>
<i class="fas fa-brain"></i>
</div>
Be sure to use only icons from the free set if you do not have a pro license. https://fontawesome.com/icons?d=gallery&m=free
The icons are working fine.
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css"
crossorigin="anonymous">
<!-- Load font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- The social media icon bar -->
<div class="icon-bar">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</div>
Check Codepen: https://codepen.io/manaskhandelwal1/pen/YzXNNLw
There is some another variability in your code.
Is it only me that cannot render bitcoin and facebook icons in version 5.0.8 ?
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css">
<i class="fa fa-btc"></i>
<i class="fa fa-bitcoin"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook-f"></i>
You also need to use the brands.css stylesheet in font-awesome 5.0.8. Additionally, you need to make sure your class names are up to date. Try the snippet below:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/brands.css" integrity="sha384-IiIL1/ODJBRTrDTFk/pW8j0DUI5/z9m1KYsTm/RjZTNV8RHLGZXkUDwgRRbbQ+Jh" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css" integrity="sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f+JpUOVdAiJ5P" crossorigin="anonymous">
<i class="fab fa-btc"></i>
<i class="fab fa-bitcoin"></i>
Alternatively, you can just use the all.css stylesheet to include all the styles
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<i class="fab fa-btc"></i>
<i class="fab fa-bitcoin"></i>
You need to load all the icon type as the bitcoin belong to the brand ones. As you can see below you can choose pack of icon you want to load: https://fontawesome.com/get-started/web-fonts-with-css
You also need to use fab not fa. https://fontawesome.com/how-to-use/web-fonts-with-css
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" >
<i class="fab fa-btc"></i>
<i class="fab fa-bitcoin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-facebook-f"></i>
This can fix the problem for all fontawesome font types 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. https://youtu.be/_GV_pEmLCLU
I want to add social media icons to my site. I want them to look like squares with rounded corners. I already have bootstrap via a cdn and per the instructions I added the font awesome in my <head> so my head now looks like this
<head>
<title>{% block title %}{{post.title}}{% endblock title %}</title>
<link href="{% static 'blog/css/blog.css' %}" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<style>
{% block style %}
{% endblock style %}
</style>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"
integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<!--<script type="text/javascript" src="http://content.jwplatform.com/libraries/WQWJdvRx.js"></script>-->
{% block head_extra %}{% endblock head_extra %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
and this is what I have which is a copy and paste from the site, except for the container div which I saw in a tutorial before I posted here, and thought by adding it, it would make a difference. It didn't.
<div class="container">
<a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank">
<span class="fa fa-twitter"></span>
</a>
<li><i class="fa fa-lg fa-youtube-square"></i></li>
</div>
How do I make this syntactically correct to make this work? All guidance and advice is welcome
According to the Font Awesome Page
To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon.
The correct format would be:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
<a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-youtube" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-youtube-square fa-stack-1x"></i>
</span>
</a>
</div>
BTW: Your HTML is invalid. li must be children of a ul.
<div class="container">
<ul>
<li><a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank"><i class="fa fa-twitter"></i>
</a></li>
<li><i class="fa fa-youtube-square"></i></li>
</ul>
</div>
I copied font-awesome.min.css into my /Content folder and have the following lines in the Head of the test page:
<link href="/content/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/Content/font-awesome.min.css" rel="stylesheet" type="text/css"/>
Both CSS are loaded into the page (when using Developer tools Network). But none of the icons are shown on the test page. I tried the following:
<div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
Or many others from the examples on Awesome Fonts site. But nothing works. What am I missing?
You need to have the .fa class on the <i> tag as well, for example:
<i class="fa fa-bar-chart-o"></i>