Font Awesome HTML 5 icon - html
Am trying to implement the HTML 5 Font Awesome icon:
on my front-end page, with no success.
My <head> section is as follows:
<!-- ----- Head ----- -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="copyright" content="Benjamin Wong" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Personal Landing Page" />
<meta name="keywords" content="Adv Dip in Pty & Facilities Mgt" />
<meta name="author" content="RECA" />
<meta name="robots" content="noindex, nofollow">
<link rel="icon" sizes="32x32" type="image/jpg" href="https://upload.wikimedia.org/wikipedia/commons/1/16/RECA-office.jpg">
<title>Course Notes — Advanced Diploma in Property & Facilities Management</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reboot.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--<link href="css/normalize.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.min.css" rel="stylesheet">
<link href="css/skeleton.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- fontawesome.io -->
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<script src="https://kit.fontawesome.com/4ba3d81910.js" crossorigin="anonymous"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- ----- Body ----- -->
<h2 class="text-left lead">
<strong>
M4: Property & Facilities Management Law<i class="fa fa-brands fa-html5"></i>
</strong>
</h2>
<hr>
The reason is that the class name for html5 icon in fontawesome v5.5.0 is fab fa-html5 instead of fa.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css" integrity="sha512-QfDd74mlg8afgSqm3Vq2Q65e9b3xMhJB4GZ9OcHDVy1hZ6pqBJPWWnMsKDXM7NINoKqJANNGBuVRIpIJ5dogfA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<i class="fab fa-html5"></i>
The reason is that the class name for html5 icon in fontawesome v5 is fab fa-html5 instead of fa. and update the link
<!-- ----- Head ----- -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="copyright" content="Benjamin Wong" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Personal Landing Page" />
<meta name="keywords" content="Adv Dip in Pty & Facilities Mgt" />
<meta name="author" content="RECA" />
<meta name="robots" content="noindex, nofollow">
<link rel="icon" sizes="32x32" type="image/jpg" href="https://upload.wikimedia.org/wikipedia/commons/1/16/RECA-office.jpg">
<title>Course Notes — Advanced Diploma in Property & Facilities Management</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reboot.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--<link href="css/normalize.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.min.css" rel="stylesheet">
<link href="css/skeleton.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css" integrity="sha512-QfDd74mlg8afgSqm3Vq2Q65e9b3xMhJB4GZ9OcHDVy1hZ6pqBJPWWnMsKDXM7NINoKqJANNGBuVRIpIJ5dogfA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- fontawesome.io -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- ----- Body ----- -->
<h2 class="text-left lead">
<strong>
M4: Property & Facilities Management Law<i class="fab fa-html5"></i>
</strong>
</h2>
<hr>
Found out what was causing the problem in your code:
Remove this line from your code:
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
Below is the modified code:
<!-- ----- Head ----- -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="copyright" content="Benjamin Wong" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Personal Landing Page" />
<meta name="keywords" content="Adv Dip in Pty & Facilities Mgt" />
<meta name="author" content="RECA" />
<meta name="robots" content="noindex, nofollow">
<link rel="icon" sizes="32x32" type="image/jpg" href="https://upload.wikimedia.org/wikipedia/commons/1/16/RECA-office.jpg">
<title>Course Notes — Advanced Diploma in Property & Facilities Management</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reboot.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--<link href="css/normalize.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.min.css" rel="stylesheet">
<link href="css/skeleton.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- fontawesome.io -->
<script src="https://kit.fontawesome.com/4ba3d81910.js" crossorigin="anonymous"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- ----- Body ----- -->
<h2 class="text-left lead">
<strong>
M4: Property & Facilities Management Law<i class="fa fa-brands fa-html5"></i>
</strong>
</h2>
<hr>
Link to codepen: https://codepen.io/geekyquentin/pen/MWQdBJM
Related
Photobox insert in Bootstrap
When I run my code on Xampp (localhost), it runs normally. When I go to the server-side to run the same code, it doesn't work with Photobox. What should I do now? My thought is to combine the two. I am thinking of copying from the Photobox archives into Bootstraps. No idea why it's not working. <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <!-- Bootstrap core CSS --> <link href="bootstrap/bootstrap.min.css" rel="stylesheet"> <link href="css/mychess.css" rel="stylesheet"> <script src="bootstrap/jquery-3.2.1.min.js"></script> <script src="bootstrap/bootstrap.min.js"></script> <script src="js/mychess.js"></script> <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script> <link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet"> <meta name="description" content="Project"> <link rel="shortcut icon" href="favicon.ico"/> <link rel="stylesheet" href="demo/styles.css"> <link rel="stylesheet" href="photobox/photobox.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src='photobox/jquery.photobox.js'></script>
Asking about PWA Capability to be accessed from chrome://apps
Asking about PWA Capability to be accessed from chrome://apps I have noticed that some PWA websites can be installed using the menu bar like the following image. & these apps show directly in the chrome://apps my PWAs don't show that option. Why ??? P.S: I passed all the normal PWA criterias & user engagement checks in lighthouse... some example websites that explain this feature are: https://trivago.com/ https://notepad.js.org/
for me, it was missing the viewport... it's solved now. here's my header now:- <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="test app"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>PWA Testing</title> <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="icon" sizes="32x32" href="images/favicon-32x32.png"> <link rel="icon" sizes="16x16" href="images/favicon-16x16.png"> <link rel="icon" sizes="48x48" href="images/favicon-48x48.png"> <link rel="icon" sizes="72x72" href="images/icon-72x72.png"> <link rel="icon" sizes="96x96" href="images/icon-96x96.png"> <link rel="icon" sizes="144x144" href="images/icon-144x144.png"> <link rel="icon" sizes="192x192" href="images/icon-192x192.png"> <link rel="icon" sizes="512x512" href="images/icon-512x512.png"> <meta name="msapplication-TileImage" content="images/icon-144x144.png"> <link rel="manifest" href="manifest.json"> <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#840012"> <meta name="msapplication-TileColor" content="#410101"> <meta name="theme-color" content="#410101"> <meta name="msapplication-config" content="browserconfig.xml" /> <meta name="application-name" content="PWA Testing Project"> <meta name="apple-mobile-web-app-title" content="PWA Testing Project"> <meta name="mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta property="og:title" content="test app"> <meta property="og:type" content="website"> <meta property="og:image" content="https://airhorner.com/images/touch/Airhorner_192.png"> <meta property="og:url" content="https://example.com/"> <meta property="og:description" content="test app"> <meta name="twitter:card" content="summary"> <meta name="twitter:url" content="https://example.com/"> <meta name="twitter:title" content="Air Horn"> <meta name="twitter:description" content="test app"> <meta name="twitter:image" content="https://example.com/images/touch/Airhorner_192.png"> <meta name="twitter:creator" content="#ahmed_badawy_x">
Google analytics no http respsonse detected
Google analytics isn't tracking my site data.
The chrome Tag Assistant extension shows me this error
And here is my page head -
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Main Information -->
<title>Jordan Miguel</title>
<meta name="description" content="Portfolio for Front-End developer
and designer Jordan Miguel">
<meta name="keywords" content="jordan miguel web design development
london UX">
<meta name="author" content="Jordan Miguel">
<meta property="og:type" content="website">
<!-- "Website" -->
<meta property="og:url" content="">
<meta property="og:title" content="Jordan Miguel">
<meta name="viewport" content="width=device-width, initial-scale=1,
minimum-scale=1.0, maximum-scale=1.0">
<!-- Fav and touch icons -->
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<!-- Plugins -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>
<script type="text/javascript" src="js/main.js" defer></script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
<!-- Style -->
<style type="text/css">.tk-freight-big-pro{font-family:"freight-big-pro",sans-serif;}</style>
<style type="text/css">
#font-face{font-family:freight-big-pro;src:url(https://use.typekit.net/af/5220ee/0000000000000000000132c1/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3)
format("woff2"),url(https://use.typekit.net/af/5220ee/0000000000000000000132c1/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3)
format("woff"),url(https://use.typekit.net/af/5220ee/0000000000000000000132c1/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3)
format("opentype");font-weight:700;font-style:normal;}#font-face{font-family:freight-big-pro;src:url(https://use.typekit.net/af/cf14b7/0000000000000000000132c2/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3)
format("woff2"),url(https://use.typekit.net/af/cf14b7/0000000000000000000132c2/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3)
format("woff"),url(https://use.typekit.net/af/cf14b7/0000000000000000000132c2/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3)
format("opentype");font-weight:700;font-style:italic;}#font-face{font-family:freight-big-pro;src:url(https://use.typekit.net/af/2668d3/0000000000000000000132c3/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3)
format("woff2"),url(https://use.typekit.net/af/2668d3/0000000000000000000132c3/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/2668d3/0000000000000000000132c3/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3)
format("opentype");font-weight:400;font-style:normal;}#font-face{font-family:freight-big-pro;src:url(https://use.typekit.net/af/af0e9d/0000000000000000000132c4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3)
format("woff2"),url(https://use.typekit.net/af/af0e9d/0000000000000000000132c4/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("woff"),url(https://use.typekit.net/af/af0e9d/0000000000000000000132c4/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3)
format("opentype");font-weight:400;font-style:italic;}
</style>
<link rel="stylesheet" href="assets/css/main.css" type="text/css">
<link rel="stylesheet" href="assets/css/framework.css" type="text/css">
<script>
(function(i,s,o,g,r,a,m)
{i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new
Date();a=s.createElement(o),
m=s.getElementsByTagName(o)
[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-
analytics.com/analytics.js','ga');
ga('create', 'UA-80642122-1', 'auto');
ga('send', 'pageview');
</script>
</head>
The strange thing is that I've used this exact structure on multiple sites and I've tried following all of the steps via google.
Either the script is missing or an ad blocker is blocking it.
Why won't my viewport tag properly use device width on most mobile devices?
I am using following meta tag. <!DOCTYPE html> <html class="no-js" data-placeholder-focus="false"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=0" /> <meta name="mobileoptimized" content="0" /> <title>index</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="css/owl.carousel.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/custom.css"> </head> when I open website from mobile, it is not responsive at all. I have not changed my css code. Please, help me! Thank you!
Bootstrap 3 not working as responsive in my play framework?
Why my Bootstrap 3 is not working as responsive in my play framework?
This is my head contain of main.scala.html which use every where..
<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">
<meta name="description" content="">
<meta name="author" content="">
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("bootstrap/css/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("bootstrap/css/sticky-footer-navbar.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/intlTelInput.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/icon.jpeg")">
<script src="#routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
<script type="text/javascript" src='#routes.Application.javascriptRoutes()'></script>
</head>