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!
Related
could anyone let me know what's wrong and cart icon is not displayed?
`<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">
<title>Website</title>
<link rel="stylesheet" href="" class="rel">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
</head>
<body>
<secton id="header">
<img src="/logo.png" class="logo" alt="">
<div>
<ul id="navbar">
<li>Home</li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa-solid fa-bag-shopping"></i></li>
</ul>
</div>
</secton>
<script src="script.js"></script>
</body>
Tried different icons and it's not working anyway..
You need to use the proper class names
.fas not .fa-solid
.fa-bags-shopping, .fa-shopping-bag, .fa-shopping-cart, or .fa-shopping-basket not .fa-bag-shopping
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<i class="fas fa-bags-shopping"></i>
<i class="fas fa-shopping-bag"></i>
<i class="fas fa-shopping-cart"></i>
<i class="fas fa-shopping-basket"></i>
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 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>
I have this font-awesome icon that I wanted to used for some reason it is not showing.I cannot to figure out why
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-
UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<div id="boxIcon2">
<i class="fas fa-car"></i>
</div>
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/