I am having this following 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">
<title>Accueil</title>
<link rel="stylesheet" href="css/header-search.css" />
<link rel="stylesheet" href="css/header.css" />
</head>
<body>
<header class="header-two-bars">
<div class="header-first-bar">
<div class="header-limiter">
<h1>Jeannot<span>Boutique</span></h1>
<div class="member-area-buttons">
Sign Up
Log In
</div>
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
<div class="clear"></div>
</div>
<div class="header-second-bar">
<div class="header-limiter">
<nav>
<i class="fa fa-male"></i> Accueil
<i class="fa fa-female"></i> Chaussures
<i class="fa fa-folder-o"></i> Vêtements
<i class="fa fa-pencil"></i> Accessoires
<i class="fa fa-check"></i> Sur mesure
<i class="fa fa-pencil"></i> Blog
<i class="fa fa-check"></i> Promo
</nav>
<div class="nav-social-media">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-instagram"></i>
</div>
<div class="clear"></div>
</div>
</div>
</header>
</body>
Basically, I am have a folder where my css files are. When I load the file header.css from the css folder, it does not have any effect, but once is in the same location with the index.html, everything is perfect.
I have struggling to find the answer but no way.
My file system structure is the following:
Please kindly help me find out what is wrong with my code.
PS: I have used the W3 Validator and everything is ok.
https://stackoverflow.com/a/9480801
Add
type="text/css"
to your link tag
While this may no longer be necessary in modern browsers the HTML4
specification declared this a required attribute.
and you may try this:
specify href="./style.css" which the . specifies the
current directory
Use
<link rel="stylesheet" href="/css/header-search.css" />
<link rel="stylesheet" href="/css/header.css" />
instead of
<link rel="stylesheet" href="css/header-search.css" />
<link rel="stylesheet" href="css/header.css" />
Related
If in my HTML file, Font Awesome icons are showing up as blank squares in all browsers, even though I've linked the stylesheet correctly and I've tried to install the package using npm, but it throws a npm ERR! code E401. I've also checked the browser developer console for error messages, but there are no errors being displayed.
<!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">
<!-- Load icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<title>EVERYTHING CHEMISTRY</title>
</head>
<body>
<div class="Grid-container">
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<i class="fa-solid fa-bars"></i>
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3 id="Website name">EVERYTHING CHEMISTRY</h3>
<img id="Logo" src="icon.png" alt="Hydrogen atom">
<img id="Chemistry Lab" src="Chemistry.JPG" alt="Chemist Lab">
<!-- The form -->
<form class="example" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="Page Title">
<h1 id="name">Periodic</h1>
<h1 id="subname">Table</h1>
</div>
<div class="Subheading">
<h2 id="Subheading 1">118 Elements</h2>
<h2 id="Subheading 2">7 Periods</h2>
</div class="Body text">
<p id="Translations">{Eng: Periodic Table; Arabic: الجدول الدوري; Afrikaans: Periodieke tabel; Mandarin: 周期表
(zhōuqī biǎo); Urdu: پیرودیک ٹیبل.}</p>
<p id="Definition">The periodic table is a tabular arrangement of the chemical elements, organized on the basis
of their atomic number, electron configurations, and chemical properties. Elements are presented in rows
(called periods) and columns (called groups or families) according to their increasing atomic number. The
elements in a group have similar chemical and physical properties, and those in a period show a progression
of properties as the atomic number increases. The table provides a useful summary of the properties of the
elements and their chemical reactivity. It is widely used in chemistry and other sciences to predict the
properties and behavior of elements and their compounds.</p>
Click Here to Smoothly Scroll Down
<i class="fa-solid fa-angle-down"></i>
<div id="down">
<h1>You are down!</h1>
</div>
</div>
</body>
</html>
The class names that you are using are for fontawesome v6 and you are including an older version v5 in your project, make sure you copy the icons classes for the version that you are using
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="Grid-container">
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<i class="fa-solid fa-bars"></i>
Link 1
</div>
</div>
</div>
<h3 id="Website name">EVERYTHING CHEMISTRY</h3>
<form class="example" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<i class="fa-solid fa-angle-down"></i>
this is the link for v5 icons
https://fontawesome.com/v5/search?o=r&s=regular
This question already has answers here:
<p> not aligning itself in center of container
(6 answers)
Closed 1 year ago.
I am learning Bootstrap v5.0. I am trying to make a webpage for practicing Bootstrap. I am having an issue with it. Text is not aligning center horizontally. I have used align-items-center for centering but it is not working.
My Code:
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<title>FairBizz</title>
</head>
<body>
<!-- ============================== Header 01 ============================== -->
<div class="container-fluid" style="background: #f7f7fd;">
<div class="container">
<div class="row align-items-center">
<div class="col-md-8">
<p>More then 25 years of experience in business! Privacy & Security </p>
</div>
<div class="col-md-4 text-end">
<i class="fab fa-facebook-f mx-2"></i>
<i class="fab fa-twitter mx-2"></i>
<i class="fab fa-instagram mx-2"></i>
<i class="fab fa-google-plus-g mx-2"></i>
<i class="fab fa-behance mx-2"></i>
</div>
</div>
</div>
</div>
<!-- ============================== JavaScript ============================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
Here is a image:
Here the text is seems pretty top side not center.
How can I do that? Help me please.
Thank you.
It is because <p> tags have margin-bottom: 1rem; in bootstrap. Either remove the margin or remove the <p> tag. then add some padding to the row if you want some space.
<div class="row py-4 align-items-center">
<div class="col-md-8">
<p class="mb-0">
More then 25 years of experience in business!
<a href="#" style="color: #08237e; font-weight: 500"
>Privacy & Security</a
>
</p>
</div>
<div class="col-md-4 text-end">
<i class="fab fa-facebook-f mx-2"></i>
<i class="fab fa-twitter mx-2"></i>
<i class="fab fa-instagram mx-2"></i>
<i class="fab fa-google-plus-g mx-2"></i>
<i class="fab fa-behance mx-2"></i>
</div>
</div>
or
<div class="row py-4 align-items-center">
<div class="col-md-8">
More then 25 years of experience in business!
<a href="#" style="color: #08237e; font-weight: 500"
>Privacy & Security</a
>
</div>
<div class="col-md-4 text-end">
<i class="fab fa-facebook-f mx-2"></i>
<i class="fab fa-twitter mx-2"></i>
<i class="fab fa-instagram mx-2"></i>
<i class="fab fa-google-plus-g mx-2"></i>
<i class="fab fa-behance mx-2"></i>
</div>
</div>
Use the utility class called text-center:
<div class="col-md-8 text-center">
This will make the text centred within col-md-8
Their docs said use text-center.
Edit: I thought you wanted both to center. I changed it back to col-md-8 and col-md-4 for both the columns and moved text-center to the first column.
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<title>FairBizz</title>
</head>
<body>
<!-- ============================== Header 01 ============================== -->
<div class="container-fluid" style="background: #f7f7fd;">
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<p>More then 25 years of experience in business! Privacy & Security </p>
</div>
<div class="col-md-4 text-end">
<i class="fab fa-facebook-f mx-2"></i>
<i class="fab fa-twitter mx-2"></i>
<i class="fab fa-instagram mx-2"></i>
<i class="fab fa-google-plus-g mx-2"></i>
<i class="fab fa-behance mx-2"></i>
</div>
</div>
</div>
</div>
<!-- ============================== JavaScript ============================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
I made these changes in your code..
Added class d-flex, text-center. Added margin-bottom:0 !important; to the <p> Tag..
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<title>FairBizz</title>
</head>
<body>
<!-- ============================== Header 01 ============================== -->
<div class="container-fluid" style="background: #f7f7fd;">
<div class="container">
<div class="row d-flex align-items-center text-center">
<div class="col-md-8">
<p style="margin-bottom:0 !important;">More then 25 years of experience in business! Privacy & Security </p>
</div>
<div class="col-md-4 text-end">
<i class="fab fa-facebook-f mx-2"></i>
<i class="fab fa-twitter mx-2"></i>
<i class="fab fa-instagram mx-2"></i>
<i class="fab fa-google-plus-g mx-2"></i>
<i class="fab fa-behance mx-2"></i>
</div>
</div>
</div>
</div>
<!-- ============================== JavaScript ============================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
How can I get the icons within the tabs section to appear on the live open server? I tried with the code below:
Loading the styles:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-o53vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK10YPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="netflix.css" type="text/css">
And here are the tabs:
<section class="tabs">
<div class="container">
<div id="tab-1" class="tab-item tab-border">
<i class="fas fa-door-open"></i>
<p class="hide-sm">Cancel at any time</p>
</div>
<div id="tab-2" class="tab-item">
<i class="fas fa-tablet-alt fa-3x"></i>
<p class="hide-sm">Watch anywhere</p>
</div>
<div id="tab-3" class="tab-item">
<i class="fas fa-tags fa-3x"></i>
<p class="hide-sm">Pick your price</p>
</div>
</div>
</section>
fontawesome now uses <script instead of link so the link I was using was outdated. This has now been fixed to the below.
output:Screen shot of browser
<!-- Add icon library -->
<html>
<body class="body">
<center>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
<img src="{{url_for('static', filename='file:/omkar.png')}}align="middle" />
<h1>Omkar More</h1>
<p class="title">Student DYPSOEA</p>
<p>PUNE UNIVERSITY</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
<
</div>
</center>
</body>
</html>
The code from above gives only symbol of image not shows it
try closing the img src attribute.
you are missing closing " and space before align="middle"
see below html
<img src="{{url_for('static', filename='file:/omkar.png')}}" align="middle" />
Check this out:
and you have incorrect syntax of img tag, here is the correct one.
<img src="{{url_for('static', filename='file:/omkar.png')}}" align="middle" />
<html>
<body class="body">
<center>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
<img src="http://placekitten.com/301/301" align="middle">
<h1>Omkar More</h1>
<p class="title">Student DYPSOEA</p>
<p>PUNE UNIVERSITY</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
</div>
</center>
</body>
</html>
<div class="col-md-12">
<div style="margin-top: 5px">
<label>
<a href="#"><i class="fa fa-comments" aria-hidden="true"></i>
Chat with #Model.MemberFirstName</a>
</label>
<label>
<a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>
Send Friend Request</a>
</label>
</div>
</div>
Writing this code, I am using 2 font awesome icons. My first icon is showing on my output screen but 2nd one is not showing. I have written same code for 2nd. I also try removing the first one, The second still not show.
Here is the output atatched.
font-awesome v4.0.0 doesn't contain fa-user-plus class. Use font-awesome v4.7.0
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-md-12">
<div style="margin-top: 5px">
<label>
<a href="#"><i class="fa fa-comments" aria-hidden="true"></i>
Chat with #Model.MemberFirstName</a>
</label>
<label>
<a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>
Send Friend Request</a>
</label>
</div>
</div>
As per your question your are using fontawesome 4.0.0 version but fa-user-plus has come in fontawesome 4.3. Check updated snippet below with latest version
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="col-md-12">
<div style="margin-top: 5px">
<label>
<a href="#"><i class="fa fa-comments" aria-hidden="true"></i>
Chat with #Model.MemberFirstName</a>
</label>
<label>
<a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>
Send Friend Request</a>
</label>
</div>
</div>