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.
Related
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.
My embed method is coded like that:
<embed type="text/html" src="header.html">
Now, I succeeded to embed the header.html file into the index.html but as a result I got also a weird long padding gap from the top header.
This is the header.html file:
<div class="top-main-area text-center">
<div class="container">
<a href="index.html" class="logo mt5">
<img src="img/logos/logo4.png" />
</a>
</div>
</div>
<header class="main">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- MAIN NAVIGATION -->
<div class="flexnav-menu-button" id="flexnav-menu-button">Menu</div>
<nav>
<ul class="nav nav-pills flexnav" id="flexnav" data-breakpoint="800">
<!-- a couple of li here -->
</ul>
</nav>
<!-- END MAIN NAVIGATION -->
</div>
<div class="col-md-6">
</div>
</div>
</div>
</header>
<div class="gap"></div>
Here is how I embed it in the index.html:
<head>
<!-- Bootstrap styles -->
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/font_awesome.css">
<link rel="stylesheet" href="css/styles.css">
<!-- IE 8 Fallback -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
</head>
<body class="boxed bg-cover" style="background-image: url(img/backgrounds/wood.jpg)">
<div class="global-wrap">
<embed type="text/html" src="header.html">
I tried to play with the CSS settings but i didn't succeed.
Why i keep getting that long padding gap?
I tried to play with the CSS settings but i didn't succeed.
It is a separate (and invalid) document. <embed> is functioning as a (poorly defined) <iframe>.
You are missing the Doctype and the head element. You don't have a stylesheet in it, so you get the default margin / padding on the body element.
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.
Based on this code I cannot retrieve any glyphicons in Bootstrap 2.3.2.
What am I missing ?
Thanks!
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap.icon-large.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<a class="btn btn-small" href="#">
<i class="icon-large icon-chat"></i>
</a>
<a class="btn btn-small" href="#">
<i class="icon-large icon-phone"></i>
</a>
<img src="glyphicons.png">
</body>
</html>
bootstrap 2.3.2 uses a png sprite in order to call its icons.
if you'll look inside bootstraps css file you'll see that it's looking for this image under:
url("../img/glyphicons-halflings.png")
whereas your image is on the same level as your css.
either change your png's location to this one (put it in the 'img' folder), or change the css file itself.
Mike.
Having some difficulties with Font Awesome and was wondering if anyone could point me in the right direction? This is what I have
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<div class="sectionTitle">
<div class="section colour1">
<i class="fa fa-camera-retro fa-3x">Camera 3px</i>
</div>
</div>
</body>
When the page is then rendered however the camera icon is not appearing, although the Camera 3px text is. I'm sure I've overlooked something fundamental here. Any thoughts at all on this would be great.
Thanks
It is loading here:
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<div class="sectionTitle">
<div class="section colour1">
<i class="fa fa-camera-retro fa-3x">Camera 3px</i>
</div>
</div>
</body>
http://jsfiddle.net/CLVx4/
Guess you did it all correct.
Your code looks correct so I think the problem is elsewhere.
If you are viewing the page through file:// URI scheme, rather than http://, the link to the external CSS file will not work without specifying http:// explicitly in the link url, this has caught me out plenty of times. May be worth changing the link to:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>