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
Related
I'm developing a web-audio player, and I'm new to Bootstrap. At the moment, my player looks like this:
This is my source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wavesurfer - Intro</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="container-fluid">
<!-- Waveform -->
<div id="waveform"></div>
<!-- Progress -->
<div class="row">
<div id="progress" class="col-md-6">Loading audio...</div>
<div id="duration" class="col-md-6" style="text-align: right;"></div>
</div>
<br>
<div class="row">
<!-- Backward 5 s -->
<button id="bwd" class="col-md-3" type="button" disabled="disabled">
<i class="fa fa-backward"></i>
<div>Backward 5 s</div>
</button>
<!-- Play/Pause -->
<button id="btn-play-pause" class="btn btn-primary col-md-4" type="button" disabled="disabled">
<i id="icon-play-pause" class="fa fa-play"></i>
<div id="text-play-pause">Play</div>
</button>
<!-- Forward 5 s -->
<button id="fwd" class="col-md-3" type="button" disabled="disabled">
<i class="fa fa-forward"></i>
<div>Forward 5 s</div>
</button>
<!-- Stop -->
<button id="btn-stop" class="col-md-2" type="button" value="Stop" disabled="disabled">
<i class="fa fa-stop"></i>
<div>Stop</div>
</button>
</div>
<br>
<div class="row">
<div class="col-md-6">
<!-- Audio rate -->
<i class="fas fa-tachometer-alt"></i>
<input id="audio-rate" type="range" min="0.25" max="2" value="1" step="0.25">
<div id="audio-rate_value" style="display: inline;">1x</div>
</div>
<div class="col-md-6" style="text-align: right;">
<!-- Volume -->
<i id="icon-volume" class="fas fa-volume-down"></i>
<input id="volume" type="range" min="0" max="2" value="1" step="0.1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<!-- Loop -->
<button id="loop" class="btn btn-outline-primary">Loop</button>
</div>
<div class="col-md-6" style="text-align: right;">
<!-- Low-pass filter -->
<button id="lowpass-filter" class="btn btn-outline-primary">Low-pass filter</button>
</div>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
I've stumbled upon several issues.
The volume icon - It changes depending on the volume level, but in a "bad way":
How can I keep it fixed?
Shrinking the screen width - This is what happens when I shrink my window (I've drawn red rectangles to make the problem clearer):
How can I keep two elements inside the same row?
EDIT #1 - This is the code for changing the volume icon:
var controls = {
...
volume: document.getElementById("volume"),
...
}
controls.volume.addEventListener("input", function () {
let volume = controls.volume.value;
wavesurfer.setVolume(volume);
// Change volume icon
document.getElementById("icon-volume").classList = "";
if(volume == 0){
document.getElementById("icon-volume").classList = "fas fa-volume-off";
}
else if (volume > 0 && volume <= 1){
document.getElementById("icon-volume").classList = "fas fa-volume-down";
}
else{
document.getElementById("icon-volume").classList = "fas fa-volume-up";
}
});
I eventually managed to solve Issue #2 by adding the width attribute to the icon tag style:
<i id="icon-volume" class="fas fa-volume-down" style="text-align: justify; width: 18px;"></i>
I am working on a clone of Google's search page. I want the page to show search results in Google when the user uses it. But instead of taking the user to a search result page, the program is instead just putting the link after my page's link. I think I must have messed some somewhere in the code but can't figure out where. I'm just starting to learn HTML. Please help me through this. Thanks!
Screenshot of error
Here is my index.html:
<html>
<head>
<title>Google Search</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="top-bar">
<div class="bar-right">
<div class="menu">
Image Search
Advanced Search
</div>
<a href="" class="profile-trigger">
<img src="images/profile.png">
</a>
</div>
</div>
<form action="www.google.com/search" id="search">
<div class="content">
<div class="search-wrapper">
<a href="" class="search-logo">
<img src="images/google-logo.png">
</a>
<div class="search-bar">
<div class="search-icon">
<i class="fa fa-search"></i>
</div>
<input type="text" name="q">
</div>
<div class="search-buttons">
<input type="submit" value="Google Search"></a>
I'm Feeling Lucky
</div>
</div>
</div>
</form>
</body>
</html>
In <form action="www.google.com/search" id="search">, the action links to a place within your directory. To link to outside URLs, you need to use the http prefix.
<form action="https://www.google.com/search" id="search"> fixes the issue.
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.
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" />
Well, I have a weird problem. I search a lot for the last several hours and all the similar problems couldn't fit exactly on my own.
In my website, all the urls with a second slash have a big white space at the bottom of the website. All the site above this space is scrollabe.
I have the same CSS file in all my url
http://localhost/testurl
http://localhost/testurl/withanotherslash
The first url doesn't have a problem, while the second has the white space. I checked the same html file in both urls.
Here is how I load the css in the second url:
<link rel="stylesheet" href="../static/css/bootstrap.min.css" />
<link rel="stylesheet" href="../static/css/jquery-ui.css" />
<link rel="stylesheet" href="../static/css/font-awesome.css" />
<link rel="stylesheet" href="../static/css/unicorn.css" />
I use two dots in the second url and one dot in the first url. I test it in Chrome and Firefox.
Here is a screenshot:
HTML Code:
<!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="../static/css/bootstrap.min.css" />
<link rel="stylesheet" href="../static/css/jquery-ui.css" />
<link rel="stylesheet" href="../static/css/font-awesome.css" />
<link rel="stylesheet" href="../static/css/unicorn.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/unicorn.js"></script>
</head>
<body data-color="grey">
<div id="wrapper">
<div id="header">
<div style="width:200px;">
<img style="display:block;margin-left:auto;margin-right:auto;padding-top:5px" src="../static/img/paulie.gif"/>
</div>
</div>
<div id="sidebar">
<div id="search" style="margin-top:80px">
<form method="post" action="/authorsearch">
<input type="text" name='authorname' placeholder="Search for an author...">
<button type="submit"></button>
</form>
</div>
<ul>
<li><i class="fa fa-home"></i><span>Dashboard</span></li>
<li><i class="fa fa-book"></i><span>Articles</span></li>
<li><i class="fa fa-user"></i><span>Editors</span></li>
<li><i class="fa fa-user"></i><span>Authors</span></li>
<li><i class="fa fa-globe"></i><span>Countries</span></li>
<li class="submenu">
<i class="fa fa-flask"></i><span>Settings</span>
<ul>
<li><span>Add an article</span></li>
<li><span>Add a user</span></li>
<li><span>All users</span></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<div id="content-header" class="mini">
<h1>My title</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 center" style="text-align: center;">
<ul class="quick-actions">
<li>
<a href="/">
<i class="icon-home"></i>
Dashboard
</a>
</li>
<li>
<a href="/articles">
<i class="icon-survey"></i>
Articles
</a>
</li>
<li>
<a href="/editors">
<i class="icon-people"></i>
Editors
</a>
</li>
<li>
<a href="/authors">
<i class="icon-people"></i>
Authors
</a>
</li>
<li>
<a href="/countries">
<i class="icon-web"></i>
Countries
</a>
</li>
</ul>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<div class="widget-box">
<div class="widget-title">
<h5>Users Database</h5>
</div>
<div class="widget-content nopadding">
<table id="myTable" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Username</th>
<th>Password</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
%for user in users:
<tr>
<td>{{user['username']}}</td>
<td>{{user['password']}}</td>
<td>test</td>
</tr>
%end
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-bottom:0px">
<div id="footer" class="col-xs-12">
2014 © Title. Brought to you by me
</div>
</div>
</div>
</body>
</html>
The CSS file is from this bootstrap template
And here is my backend in Python Bottle and how I call the CSS files:
#bottle.get('/static/css/<filename:re:.*\.css>')
def stylesheets(filename):
return bottle.static_file(filename, root='./static/css/')
That's how the theme is designed to work. On a shorter page like this one you'll see that gap on larger screens.
An easy solution is to set the body background color to the same as the footer/wrapper color, which extends the footer color to the bottom of the page. E.g.
body {background: #3c3c3c;}
An alternative would be to use a sticky footer setup, but that's messier and might look a bit silly anyhow.