I am new in web development. I have downloaded a free template with all sources and trying to change it for having some experience. When i run the template, the fa fa-facebook, fa fa-twitter etc icons are showing codes like f0 98 etc in square and the icons of facebook and twitter are not showing. Kindly help!.
Here is the code to link font-awsome
<link rel="stylesheet" type="text/css" href="libraries/fonts/font-awesome.min.css">
here is the code
<!-- Header Socials -->
<div class="col-md-4 col-sm-12 col-xs-12 header-socials">
<ul class="no-padding">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-pinterest"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
<i class="fa fa-user"></i>Contact Us
</div><!-- / Header Socials -->
Regards!
Akhtar
It doesn't sound like you have fully implemented Font Awesome
Try putting this inside <head>:
<script src="https://use.fontawesome.com/08a9781b65.js" type="text/javascript"></script>
Related
I am making a webpage using Bootstrap4(CDN) and I intend to use FontAwesome icons for my social media links. However on opening the page I see some blue boxes instead of the icons and they are functional. I just need the icons to be displayed. Any help would be appreciated.
Here are the necessary snippets :
1.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
2.
<ul class="social-icons">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-quora"></i></li>
<li><i class="fab fa-github"></i></li>
<li><i class="fab fa-envelope"></i></li>
</ul>
Here is what I see...
Since you are using the v4.*.* of font-awesome the prefix class of invoking your desired icon is fa not fab.
fab and fas are for the brand and solid styles in v5.*.* and also, fa is deprecated in this version. You can read more about it here.
so you need to make a change in your script just like this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="social-icons">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-quora"></i></li>
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-envelope"></i></li>
</ul>
NOTE: You can upgrade your current version from here.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<ul class="social-icons">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-quora"></i></li>
<li><i class="fab fa-github"></i></li>
<li><i class="fa fa-envelope"></i></li>
</ul>
The problem is with the CDN you have. Request a Kit by creating an account on fontawesome website. They will give you something like this: <script src="https://kit.fontawesome.com/fc188b5fd5.js" crossorigin="anonymous"></script> or you can simply use this.
For displaying the envelope you need to change from <i class="fab fa-envelope"></i> to <i class="fa fa-envelope"></i>.
This question already has answers here:
Clickable icon with link
(3 answers)
Closed 4 years ago.
I've made a social media icon list for my webpage but I don't know how to insert a link in them so they take you somewhere when clicking... I've tried using the "a" tag but it's not working:
<div class="leftside">
<ul class="socialmediaicons">
<li><i class="fa
fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
</ul>
</div>
I've only tried on the facebook icon and it doesn't work, what am doing wrong?
Its working now
<div class="leftside">
<ul class="socialmediaicons">
<li><a target="_blank" href="https://www.facebook.com/EnUnChasquido" rel="http://www.facebook.com/">Facebook<i class="fa
fa-facebook"></i></a></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
</ul>
</div>
Simple use like this
<div class="leftside">
<ul class="socialmediaicons">
<a href="https://www.facebook.com/EnUnChasquido"><li><i class="fa
fa-facebook"></i></li></a>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
</ul>
</div>
Wrap the entire i tag within the anchor tag
Jsfiddle link: https://jsfiddle.net/VrtuosArs/14x0rbtb/
Hope the following code snippet solves your problem
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="leftside">
<ul class="socialmediaicons">
<li><a href="https://www.facebook.com/EnUnChasquido" target="_blank"><i class="fa
fa-facebook"></i></a></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><a href="https://www.youtube.com" target="_blank"><i class="fa fa-youtube"></i></li>
</ul>
</div>
The anchor element tag is the letter “a” surrounded by angle brackets like this: . Both the opening and closing attributes are required, and all of the content between the tags makes up the anchor source. If we want to use just a single word as an anchor, we wrap just that one word in anchor tags. we can use text, image, icons as content
I have Font Awesome icons installed on this site. The icons size isn't increasing even after adding the class to increase size.
<ul class="stay-connected-inner list-inline">
<li><i class="fa fa-twitter fa-3" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></li>
<li><i class="fa fa-medium fa-3" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></li>
</ul>
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
<ul class="stay-connected-inner list-inline">
<li><i class="fa fa-twitter fa-3x" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></li>
<li><i class="fa fa-medium fa-3x" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></li>
</ul>
font-awesome icons are texts. So use font-size to increase the size of font-awesome icons.
For eg.,
i {
font-size: 18px;
}
For font awesome icons sizing please check this link.
http://fontawesome.io/examples/
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
I had the same problem. For some reason the fa class is overriding the fa-2x class on the awesome font library. I found a blog that they knew it was an issue back in 2014 but haven't addressed it yet. On my site I added the style class again and added !important which fixed my problem.
<style>
.fa-2x{
font-size:2em !important;
};
</style>
use following inline css
<style type="text/css">
.fa-3{
font-size: 30px;
}
</style>
if you are using font awesome or font awesome pro icons in Angular 5+ using svg with Javascript. The easy way to increase your custom font size is:
.svg-inline--fa{
font-size:1.500em; //use your custom font size. If you do not want to apply the font awesome size classes
}
Apply this in your custom component to see the changes immediately.
In my case setting fa fa-5x, or font-size or height didn't help, but:
width: 20px !important; // 20px is an example value
Also be cautious if you have padding applied!
now how can i add my own img for a UI list (nav bar)?
Im trying to add my own icon/imgs for each ul list
my current code:
<li> <i class="fa fa-car"></i> אזורי חלוקה</li>
<img src="images/United-States-Flag-24.png" alt="US ENG" title="US English" />
<li> <i class="fa fa-envelope-o"></i> צור קשר</li>
<li><i class="fa fa-shopping-cart"></i> חנות</li>
Here is an example from the font awesome page:
http://fortawesome.github.io/Font-Awesome/examples/
first your code above does not include the ul tag, not sure if you forgot it or did not include it
the use of <i> tags is right, but maybe you did not included the font awesome in your header?
try this example and see if you get the icons to appear. I can edit this base on your feedback
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
I am trying to create animated menu from the reference of 'codepen' but i don't understand the code written below can someone help me, its the first time i saw the code like this, its looks like selector but cant help it to understand
HTML :
<div id="wrapper">
<div class="mobile">
<!-- Checkbox to tonggle the menu -->
<input type="checkbox" id="tm"/>
<ul class="sidenav">
<li><i class="fa fa-apple"></i></li>
<li><i class="fa fa-windows"></i></li>
<li><i class="fa fa-android"></i></li>
<li><i class="fa fa-dribbble"></i></li>
<li><i class="fa fa-tumblr"></i></li>
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
<li><i class="fa fa-dropbox"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-vimeo"></i></li>
<li><i class="fa fa-skype"></i></li>
</ul>
<!-- Content area -->
<section>
<!-- Label for #tm checkbox -->
<label for="tm">Menu</label>
</section>
#ID:checked~section{
}
It means inside particular ID, if the check box is checked then its section(sibling) must have following properties
tilde(~) is a general sibling combinator
For more Information Check this link