why the font awesome doesn't work in this html code? - html

I want to use font awesome in my html code. The following is my code. But it doesn't get applied.. I've saved the font awesome dir within my project folder as well..
<?php
include '../config/sessionhandling.php';
//print_r($_SESSION['userrow']);
$role_id=$userrow['role_id'];
include '../config/dbconnection.php';
include '../model/user_model.php';
$obu=new user_model();
$resultu=$obu->viewUsers();
$nou=$resultu->rowCount();
$resultud=$obu->viewUsersDe("Deactive");
$noud=$resultud->rowCount();
$noua=$nou-$noud;
$to=date('Y-m-d');
$resultday=$obu->viewLogPerDay($to);
$noday=$resultud->rowCount();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Faculty Management System</title>
<link rel="stylesheet" type="text/css"
href="../css/layout.css"/>
<link rel="stylesheet" type="text/css"
href="../bootstrap/css/bootstrap.min.css" />
<!-- <link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">-->
<link rel="stylesheet" href="../fontawesome-free-5.12.0-web/css/font-awesome.min.css">
</head>
<body>
<div id="main">
<?php
include '../templates/header.php'; ?>
<?php
include '../templates/userrole.php'; ?>
<div id="navigation">
<div>
<ul class="breadcrumb">
<li class="active">
Dashboard
</li>
</ul>
</div>
</div>
<div id="content">
<div class="row">
<div class="col-md-3">
<ul style="list-style: none">
<li>
<i class="fas fa-user-graduate"></i>
User</li>
<li>
<!-- <i class="glyphicon glyphicon"></i>-->
Faculty</li>
<li>
<!-- <i class="glyphicon glyphicon-bold"></i>-->
Department</li>
<?php //}
//if ($role_id!=3) { ?>
<li>
<!-- <i class="glyphicon glyphicon-credit-card"></i>-->
Course</li>
<li>
<?php //} ?>
<!-- <i class="glyphicon glyphicon-barcode"></i>-->
Appointment</li>
<li>
<i class="fas fa-bells"></i>
Notification</li>
<?php //if($role_id==1 || $role_id==2) { ?>
<li> <i class="glyphicon glyphicon-filter"></i>
Feedback</li>
<li> <i class="glyphicon glyphicon-record"></i>
Report</li>
<?php //if($role_id==1) { ?>
<li> <i class="glyphicon glyphicon-backward"></i>
Backup</li>
<?php //} ?>
</ul>
</div>
<div class="col-md-9">
<div class="row">
<?php if($role_id==1){ ?>
<div class="col-md-4"> <!--Grid technique is used -->
<div class="panel panel-success"> <!-- panel-success gives green colour to the panel-->
<div class="panel panel-heading">
User and Login
</div>
<div class="panel-body">
<p>No.of Users:<span class="badge"><?php echo $nou; ?></span></p>
<p>Active Users:<span class="badge"><?php echo $noua; ?></span></p>
<p>Deactive Users:<span class="badge"><?php echo $noud; ?></span></p>
<p>No. of Login(<?php echo date ('Y-m-d');?>): <span class="badge"><?php echo $noday; ?></span></p>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<?php include '../templates/footer.php'; ?>
</div>
</body>
</html>
I want to display some of the icons in my dashboard and is there a better way to accomplish this? Please help me to sort this out.....Or is there a better way to use font awesome??

Try adding a type attribute to your link element:
<link rel="stylesheet" href="../fontawesome-free-5.12.0-web/css/font-awesome.min.css" type="text/css" />

Try and check your font awesome css link like this
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>

Use CDN:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" crossorigin="anonymous">

First of all, font awesome has a cdn you should be using as part of your account. That way you don't have to manage its updates.
Second, review this thread. This is a better way to include files in a site for your users. Remember, PHP is a server-side rendering language. When you are including links directly in your head, it is up to the user (the browser) to render your file which essentially slows down the page-load. This isn't a big deal for a single file, but if you're doing this with multiple files you're unnecessarily slowing down your site. PHP is efficient at running scripts on the server and you're maximizing the usage you pay for in your server.
The crux of that thread teaches you to:
Define your stylesheet and it's variable(s)
Lookup how to use output buffering to get it to load correctly
If you're using wordpress, it has a custom "hook" called "enqueue" that you can include in functions.php that will achieve the same effect. FAQ on Wordpress wp_enqueue_style() functions.

Try the snippet. Changed the fas fa-github to fab fa-github.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<div class="jumbotron">
<h1 class="display-4">Henrique Borges</h1>
<p class="lead">Programador experiente e Web Designer.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<i class="fab fa-github btn btn-dark btn-lg" href="#" role="button"> Github</i>
</p>
</div>

Use the CDN link in the head tag :
<link type='text/css' href='the font link' >
Note : You should attach the config files of your framework or the CDN link in your html in every project . Don't forget.

Related

QATester weird Error: clickable element "ADD" was not found by text|CSS|

Now... the App runs smoothly and fulfill every functionalities, thing is when I try to run the QATest, everyone pass through, except one:
Error: clickable element "ADD" was not found by text|CSS|xpath
This error its driving me nuts, as ADD button runs OK on the remaining test. Here is my Index.php:
<?php include("db.php"); ?>
<!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">
<title>TEST ASSESMENT</title>
<!--- Bootstrap CSS --->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="header"style="margin-top:50px;">
<form action="delete_product.php" method="post">
<div class="alignButton" style="display:flex; justify-content:space-between">
<a style="margin-left:30px;text-decoration:none;color:black;font-size:30px;" href="index.php">Product List</a>
<div class="alignButtons" style="display:flex; justify-content:flex-end">
<button style="margin-right:50px;" id="add" type="button" class="btn btn-primary" name="add" onclick="window.location.href='product_add.php'">ADD</button>
<button style="margin-right:50px;" id="delete-product-btn" type="submit" name="mass_delete" class="btn btn-danger">MASS DELETE</button>
</div>
</div>
<hr/>
</div>
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<!--Get all products from DB-->
<?php
$query = "SELECT * FROM products";
$result_products = mysqli_query($conn, $query);
while($row = mysqli_fetch_array($result_products)) { ?>
<!-- <?php
if(isset($_SESSION['status'])){
echo "<h4>".$_SESSION['status']."</h4>";
unset($_SESSION['status']);
}
?> -->
<div class="col-sm-4">
<div class="card" style="margin:10px;padding:10px;width:250px;">
<input class="delete-checkbox" type="checkbox" name="check_list[]" value="<?php echo $row['id']; ?>">
<label><?php echo $row['sku']; ?> : <?php echo $row['prod_type']; ?></label>
<h5><?php echo $row['name']; ?></h5>
<p>$<?php echo $row['price']; ?></p>
<!--Conditional rendering depending on product type-->
<?php if ($row['prod_type'] == 'DVD'): ?>
<p>Size: <?php echo $row['dvd']; ?>MB</p>
<?php elseif ($row['prod_type'] == 'BOOK'): ?>
<p>Weight: <?php echo $row['book']; ?> Kgs.</p>
<?php elseif ($row['prod_type'] == 'FUR'): ?>
<p> H:<?php echo $row['fur_h']; ?>x W:<?php echo $row['fur_h']; ?>x L:<?php echo $row['fur_l']; ?></p>
<?php endif ?>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</form>
</div>
<!--- Bootstrap JS --->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
And here is the QATester issue:
Check homepage basic requirements
951ms

Error: Clickable element "ADD" was not found by text|CSS|XPath
Error: Clickable element "ADD" was not found by text|CSS|XPath
at new ElementNotFound (node_modules/codeceptjs/lib/helper/errors/ElementNotFound.js:14:11)
at assertElementExists (node_modules/codeceptjs/lib/helper/WebDriver.js:2835:11)
at WebDriver.click (node_modules/codeceptjs/lib/helper/WebDriver.js:917:7)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
I }) => {
I.amOnPage('/');
I.click('MASS DELETE');
I.click('ADD');
The 11th following test passes OK. Even the button MASS DELETE on the same test.I have tried to Switch button order ( Mass Delete & Add), declare them with class/id; Rename button to add, Add, ADD; moved the button outside container div... Can't figure out what's the problem or what I have missing. I would really appreciate any help/clue/tip about it.
Answer: Just add the text ADD in the add button. it will pass. If you have multiple navigation for different page. type the exact 'ADD' text inside the button tag.
This is my navigation and it worked: it is in react, but similar with the html
<header>
<nav className="nav px-3 m-auto d-flex justify-content-between align-items-center border-bottom">
<h3 className="nav-title">
<Link to="/">Product {isProductListPage ? "List" : "Add"}</Link>
</h3>
<div className="nav-list d-flex align-items-center">
<Link to="/add-product">
<button className="nav-list-add btn me-3">
ADD
</button>
</Link>
<button id="delete-product-btn" onClick={handleDelete} className="btn btn-danger">MASS DELETE</button>
</div>
</nav>
</header>
I had the same problem. Just put bigger margin between buttons :)

Bootstrap 3 to Bootstrap 4

I can't figure out how to translate this from Bs3 to Bootstrap 4:
<div class="input-group date">
{% include "bootstrap_datepicker_plus/input.html" %}
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I read that gyphicon has been dropped so I replaced it with fa fa-calendar and added the appropriate stylesheet.
I can't get that button working - which was the glyphicon
As per your question I think you are using Font Awesome Icons
For including font-awesome library follow following link:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Even as per latest Font awesome CDN package 5
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
class for the calendar has been renamed to far fa-calendar as shown in link
It should be like this. Please, note, you haven't stated which version of font-awesome you are using. I assumed this
<div class="input-group date">
{% include "bootstrap_datepicker_plus/input.html" %}
<span class="input-group-addon">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
You may use feather icons from here (Github link here) instead of glyphicons in Bootstrap 4. The following code example might be of some help to you.
<html>
<head>
</head>
<body>
<div data-feather="calendar">Calendar</div>
<!-- Icons -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace()
</script>
</body>

White bar at the bottom of my website

On the bottom of my website, BJBGaming1.com, there is a weird white bar, please help me get rid of it. and my coding is
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li>Home</li>
<li>Minecraft</li>
<li>CS:GO</li>
<li>Smite</li>
</ul>
</div>
</div>
<div class="callout large primary">
<div class="row column text-center">
<h1 style="color:green">BJBGaming1</h1>
<h2 class="subheader">Happy Thanksgiving!</h2>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Minecraft <small>11/25/2015</small></h3>
<img class="thumbnail" src="Minecraft.png">
<p style="color:white">Minecraft is a very popular game, on PC, Xbox, and Smart Phones, played by millions of people every day. For more information go to www.bjbgaming1.com/minecraft</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>CS:GO <small>11/25/2015</small></h3>
<img class="thumbnail" src="CS.GO.png">
<p style="color:white">CS:GO stand for, Counter-Strike: Global Offensive, and is a FPS game that is assosiated with E-Sports, and played by millions of people everyday. For more information go to www.bjbgaming1.com/cs_go</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Smite <small>11/25/2015</small></h3>
<img class="thumbnail" src="Smite.png">
<p style="color:white">Smite is a game just like LoL (League of Legends). In Smite you can pick from over 50 gods that ou unlock with Favor, favor is basically the currency to buy gods, but in Smite there are tons of different game modes, and every day they feature a community made gamemode. Also, Smite is always coming out with new gamemodes to try. For more information go to www.bjbgaming1.com/smite</p>
</ul>
</div>
</div>
</div>
<!-- begin wwww.htmlcommentbox.com -->
<div style="color:white" id="HCB_comment_box">Comment Form is loading comments... </div>
<link rel="stylesheet" type="text/css" href="//www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
<script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user) {hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttri bute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24nHgonDoa 62nAhjUsN9BAt%2F"+"&opts=16862&num=10&ts=1448559904895");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end www.htmlcommentbox.com -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script>
<script>
$(document).foundation();
</script>
</body>
</html>
Im probably missing some code so its probably best that you look at it from bjbgaming1.com
Add background color to the "body" tag of this website by using CSS:
body {
background-color: #000;
}
The bottom of your background image is black so add black background to 'extend' the background image.

icons in html page

I'm totally new in html and planned to design a personal web page. The following is the code I wrote. Everything is fine and the only problem I have is about two icons I used: icon-user and icon-book. The problem is that it does not show up in the page.
<!DOCTYPE html>
<html class=" js no-touch csstransitions" style="" lang="en"><head>
<title>Vahid: Homepage</title>
<!--CSS styles-->
<link rel="stylesheet" href="Vahid%20::%20Homepage_files/bootstrap.css">
<link rel="stylesheet" href="Vahid%20::%20Homepage_files/font-awesome.css">
<link rel="stylesheet" href="Vahid%20::%20Homepage_files/perfect-scrollbar-0.css">
<link rel="stylesheet" href="Vahid%20::%20Homepage_files/magnific-popup.css">
<link rel="stylesheet" href="Vahid%20::%20Homepage_files/style.css">
<link id="theme-style" rel="stylesheet" href="Vahid%20::%20Homepage_files/default.css">
<!-- bxSlider CSS file -->
<link href="Vahid%20::%20Homepage_files/jquery.css" rel="stylesheet">
</head>
<body data-twttr-rendered="true">
<div id="wrapper">
<i class="icon-reorder"></i>
<div id="sidebar">
<div class="ps-container" id="main-nav">
<div id="nav-container">
<div id="profile" class="clearfix">
<div class="portrate hidden-xs"></div>
<div class="title">
<h2>Vahid</h2>
</div>
</div>
<ul id="navigation">
<li class="currentmenu">
<a href="Vahid :: Homepage.html">
<div class="icon icon-user"></div>
<div class="text">About Me</div>
</a>
</li>
<li>
<a href="Vahid :: Research.html">
<div class="icon icon-book"></div>
<div class="text">Research</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<iframe style="display: none;" allowtransparency="true" scrolling="no" id="rufous-sandbox" frameborder="0"></iframe></body></html>
and both icons are clearly defined font-awesome.css
.icon-user:before{content:"\f007";}
.icon-book:before{content:"\f02d";}
It would be great if you guys can help.
<i class="fa fa-book"></i>
to simplify Kamils response.
You can place i into another div, you will have less issues that way.
EX: <div class="text"><i class="fa fa-book"></i> About Me</div>.
Copy and paste that. I recommend you always use the i tag to place icons. You can place them in most html tags such as headers.
<h1><i class="fa fa-magnet"></i> This is a magnent</h1>
Check out http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ for an alternative methods.
If you are new to bootstrap, check out http://bootsnipp.com/
This is a great reference for code snippets.
If you are using Bootstrap 3, check out this link http://getbootstrap.com/components/
You will read about glyphicons here.
Glyphicons now come with Bootstrap and you may find glyphicons more appropriate at times.

After changing website template into drupal images don't load

I'm changing a site template into the drupal theme.
I put the header in html.tpl.php and body in page.tpl.php and also set .info file but the page doesn't load properly and image of the site don't show in browser.
it seems to me with these settings and Since I still haven't changed the static content. it should work same as static version if so what would be the problem?
HTML code:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../js/modernizr.js"></script>
</head>
<body>
<div id="wrapper">
<div class="header-wrapper header-alt2">
<div class="works-thumb">
<img src="../img/works/works-8.jpg" alt="Project Name">
<div class="works-title">
<h4>
Project Name
</h4>
</div>
<i class="icon-play"></i>
<div class="overlay">
<h4></h4>
<p>Project Name Description</p>
<div class="overlay-icons">
<i class="icon-eye"></i>
<i class="icon-link"></i>
<i class="icon-play"></i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.info file:
package, core and ..
stylesheets[all][] = css/style.css
scripts[] = js/modernizr.js
and region
html.tpl.php file:
?><!DOCTYPE html>
<html class="no-js" lang="en">
<head profile="<?php print $grddl_profile; ?>">
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>
page.tpl.php file:
<div id="wrapper">
<div class="header-wrapper header-alt2">
<div class="works-thumb">
<img src="../img/works/works-8.jpg" alt="Project Name">
<div class="works-title">
<h4>
Project Name
</h4>
</div>
<i class="icon-play"></i>
<div class="overlay">
<h4></h4>
<p>Project Name Description</p>
<div class="overlay-icons">
<i class="icon-eye"></i>
<i class="icon-link"></i>
<i class="icon-play"></i>
</div>
</div>
</div>
</div>
</div>
Copy your all images in to
/sites/all/themes/yourthemename/images
folder.
Then change the image path in page.tpl.php like this:
/sites/all/themes/yourthemename/works-8.jpg
instead of using:
../img/works/works-8.jpg