I did the exact required steps in the website and still it doesn't work..
<script src="https://use.fontawesome.com/3e91539bf3.js"></script>
<div class="navbar">
<i class="fas fa-user-friends"></i>About Me
<i class="fas fa-person-booth"></i>My Builds
<i class="fas fa-clock"></i>Get in-touch
</div>
give this a try it should work .
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script>
I can say that's because of the version mismatch, you can try font awesome 4.7 as it is included in bootstrap cdn.
Copy to the head of html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<i class="fa fa-5x fa-cog fa-fw" aria-hidden="true"></i>
<i class="fa fa-camera-retro fa-5x"></i>
</body>
</html>
Related
I have encountered this weird event when creating social media icons.
My original code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Document</title>
</head>
<body>
<h3>Follow Us</h3>
<div class="socials-container">
<i class="fab fa-facebook"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</div>
</body>
</html>
At first the icons inside the "socials-container" div did not appear. But they showed up when I removed the container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Document</title>
</head>
<body>
<h3>Follow Us</h3>
<i class="fab fa-facebook"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</body>
</html>
Then I tried to rename the div's class to something like "social-container" (without the 's') the icons showed up.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Document</title>
</head>
<body>
<h3>Follow Us</h3>
<div class="social-container">
<i class="fab fa-facebook"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</div>
</body>
</html>
Does HTML have rules for class names that I don't know? Why is a specific class name causing children to not appear as usual?
I added
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
to index.html
but I can't show the icon on the web page it shows the icon name as a string.
I tried
<span class="material-icons-outlined">
done
</span>
but it does not work.
You can show Material icons on the web page using this code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
</body>
</html>
Example
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
I dont know what details do you need. Code is very simple.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<ul class="sci">
<li><i class="fab fa-facebook" aria-hidden="true"></i></li>
<li><i class="fab fa-instagram" aria-hidden="true"></i></li>
<li><i class="fab fa-vk" aria-hidden="true"></i></li>
</ul>
</body>
</html>
details details details details details details details details details
change fab to fa. you need to use font-awesome version 5 to use fab
<i class="fa fa-facebook" aria-hidden="true"></i>
or use font-awesome 5 cdn link
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css
fab is not included in the 4.7.0/css/font-awesome.min.css.
Consider using up-to-date 5.15.1 cdn link (provided by cdnjs.com):
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<ul class="sci">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-instagram" aria-hidden="true"></i></li>
<li><i class="fab fa-vk" aria-hidden="true"></i></li>
</ul>
use latest CSS and JS.
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" integrity="sha512-F5QTlBqZlvuBEs9LQPqc1iZv2UMxcVXezbHzomzS6Df4MZMClge/8+gXrKw2fl5ysdk4rWjR0vKS7NNkfymaBQ==" crossorigin="anonymous"></script>
</head>
<body>
<ul class="sci">
<li><i class="fab fa-facebook" aria-hidden="true"></i></li>
<li><i class="fab fa-instagram" aria-hidden="true"></i></li>
<li><i class="fab fa-vk" aria-hidden="true"></i></li>
</ul>
</body>
</html>
You have to get the CDN link from the Font Awesome site. This is what it looks like:
<script src="https://kit.fontawesome.com/9375920.js" crossorigin="anonymous"></script>
(Don't use this one, the ID in there is not valid). Include it in the head of your code and it should work fine.
I can't get the Font Awesome icons to show up. I've tried different CDNs and it does nothing on any browser.
CSS links:
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/theme.min.css">
<link rel="stylesheet" href="assets/css/color-defaults.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-white.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-blue.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-gray.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-black.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-white-black.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-white-green.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-white-red.min.css" media="screen">
<link rel="stylesheet" href="assets/css/fonts.min.css" media="screen">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/primary.css" media="screen">
Font Awesome HTML:
<div class="col-md-4">
<h1 class="h2">Follow</h1>
<hr />
<i class="fa facebook-official fa-lg"></i>
<i class="fa google-plus-square fa-lg"></i>
<i class="fa twitter-square fa-lg"></i>
<i class="fa instagram fa-lg"></i>
</div>
I think you have the wrong classes. Try this:
<div class="col-md-4">
<h1 class="h2">Follow</h1>
<hr />
<i class="fa fa-facebook-official fa-lg"></i>
<i class="fa fa-google-plus-square fa-lg"></i>
<i class="fa fa-twitter-square fa-lg"></i>
<i class="fa fa-instagram fa-lg"></i>
</div>
You need to add fa- before each logo.
Here is an example that you always get form their documentations.
http://fortawesome.github.io/Font-Awesome/icon/archive/
I have linked it correctly adding "http:" before the link since I am using a localHost
<head runat="server">
<title>Brave Watches</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href ="CSS/bootstrap.min.css" rel ="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href ="CSS/custom.css" rel ="stylesheet" />
<link href ="JavaScript/Custom.js" rel="" />
<link rel="stylesheet" type="text/css" href="Cartfiles/assets/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Cartfiles/assets/css/custom.css"/>
<head/>
And I have added fa before fa-"icon"
<div class ="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
</div>
Still don't understand why it is giving me the blank rectangles.
Thanks in advance!