I downloaded fontawesome-free-5.8.2-web from fontawesome.com and put css and webfonts files to my project root and I called it in index.html. So it doesn't work for me correctly, when I use elements of it, only it shows empty square. what should I do?
Thank you
Here is the code:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>دوره مجازی آموزش طراحی قالب وردپرس</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<!--<script src="https://use.fontawesome.com/84c3f8fd28.js"></script>-->
<link rel="stylesheet" type="text/css" href="css/fontawesome.min.css">
<!--<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>-->
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<!--Top Bar-->
<div id="top-bar">
<div class="container">
<nav id="top-rightmenu">
<ul>
<li><i class="fas fa-file-alt"></i> وبلاگ </li>
<li><i class="fas fa-list-alt"></i> شغل ها </li>
<li><i class="fas fa-bullhorn"></i> پشتیبانی </li>
<li><i class="fas fa-globe"></i> فارسی </li>
</ul>
</nav>
<div class="top-left-social">
<ul>
<li><i class="fab fa-facebook-square"></i></li>
<li><i class="fab fa-twitter-square"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-google-plus-g"></i></li>
</ul>
</div>
</div>
</div>
<!--End Top Bar-->
<script src="js/vendor/modernizr-3.7.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
Important: Add supporting library file namely solid.css
<link href="fonts/css/fontawesome.css" rel="stylesheet">
<link href="fonts/css/brands.css" rel="stylesheet">
<link href="fonts/css/solid.css" rel="stylesheet">
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>
In handlebar main.hbs page s not loading
below is
app.js
// Handlebars
app.engine(
'.hbs',
engine({
defaultLayout: 'main',
extname: '.hbs',
})
)
app.set('view engine', '.hbs')
app.set('views', './views');
main.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0- 2/css/all.min.css"
integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/style.css">
<title>KadhaStore</title>
</head>
<body>
{{> _header}} <!---partial file u can include like this --->
<div class="container">
{{{body}}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.14.1/ckeditor.js"
integrity="sha256-bEIQpI72w9NJuIVhTLFUF2/8uxl0u5800r8ddViuv+o=" crossorigin="anonymous"></script>
</body>
</html>
_header.hbs
<nav class="grey darken-3">
<div class="nav-wrapper container">
Kadhas
<a href="#" data-target="mobile-demo" class="sidenav-trigger show-on-large"><i class="fas fa-bars">
</i></a>
<ul class="sidenav" id="mobile-demo">
<li>Kadha</li>
<li>Dashboard</li>
<li>Logout</li>
</ul>
</div>
</nav>
I tried app.engine() to change main.hbs but did not work for me
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 am trying to learn Materialize (materializecss.com) and I am stuck with how to make action buttons. The button on the lower left hand corner appears, but when I hover, the other buttons do not then appear.
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<script type="text/javascript" src="js/materialize.min.js"></script>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a><i class="material-icons">publish</i></a></li>
<li><a><i class="material-icons">publish</i></a></li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
</body>
</html>
Help! Thanks in advance.
I have added jquery in code and its working fine for me,
See my code below:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a><i class="material-icons">publish</i></a></li>
<li><a><i class="material-icons">publish</i></a></li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
Look at this two images, and please tell me what is going on?
Why the icons moving ?
Image 01
Image 02
i'm stuck on this for about an hour...
The icons must be align on the right or left, the 3 icons are "floating left" but still look like this...
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Duall Sistemas</title>
<!-- Bootstrap core CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/materialize.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="libs/bootstrap/bootstrap-social.css">
<link rel="stylesheet" type="text/css" href="libs/font-awesome/css/font-awesome.css">
<base href="/index.ejs">
</head>
<body>
<div class="navbar-fixed">
<nav>
<div class="row">
<div class="col s12 ">
<div class="nav-wrapper">
Duall Sistemas
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Principal</li>
<li>Contato</li>
<li>Sobre</li>
</ul>
<!-- Menu para Mobile -->
<ul class="side-nav" id="mobile-demo">
<li>
<div class="userView">
<img class="background" src="img/image03.jpg">
<img class="circle" src="img/duallsistemas.png">
<span class="white-text name">Duall Sistemas</span>
<span class="white-text email">duallsistemas#gmail.com</span>
</div>
</li>
<li><i class="material-icons">home</i>Principal</li>
<li><i class="material-icons">mail</i>Contato</li>
<li><i class="material-icons">favorite border</i>Sobre</li>
</ul>
<script>
$(document).ready(function(){
$(".button-collapse").sideNav({
closeOnClick: true
});
})
</script>
</div>
</div>
</div>
</nav>
</div>
<!-- DIV que recebe as VIEWs na pasta Partials de acordo com os Controlleres -->
<div class="container" id="container-main">
<div ng-view>
</div>
</div>
<!-- Scripts para inicializar o Angular e seus Controladores -->
<script type="text/javascript" src="libs/jquery/jquery.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<script type="text/javascript" src="libs/angular/angular.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.js"></script>
<script type="text/javascript" src="libs/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="libs/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="js/controllers/homeController.js"></script>
<script type="text/javascript" src="js/controllers/navController.js"></script>
<script type="text/javascript" src="js/controllers/aboutController.js"></script>
<script type="text/javascript" src="js/controllers/contactController.js"></script>
<script type="text/javascript" src="js/services/Api.js"></script>
</body>
</html>
It looks as though you are floating your icons to the left and the following elements are catching on it.
Try setting clear left on your lis.
li {clear: left;}