Hi I am using Bootstrap to design a 'Site Maintenance' page.
I am using the 'Spinning Icon Font' to display the spinning gears. While this works very fine on my local XAMPP server, it is not showing when I upload it to online server.
Should be:
But it is showing as
However those rectangular frames shown in the second pic are spinning, but it is not showing the gears.
My index.html
<!DOCTYPE html>
<head>
<title>Maintenance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald:400,300,700">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="/css/font-awesome.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<!-- App CSS -->
<link rel="stylesheet" href="/css/admin.css">
</head>
<body class="">
<div class="maintenance-wrapper">
<div class="maintenance">
<div class="maintenance-icon">
<i class="fa fa-cog fa-spin gear-1"></i>
<i class="fa fa-cog fa-spin gear-2 text-primary"></i>
<i class="fa fa-cog fa-spin gear-3 text-secondary"></i>
</div> <!-- /.The Spinning-icons -->
<h1 class="maintenance-title">Site Maintenance</h1>
</body>
</html>
Where am I doing wrong?
Live example can be see at http://vikramrao.com
"font-awesome.min.css" is trying to load fonts from:
http://vikramrao.com/fonts/
so:
http://vikramrao.com/fonts/fontawesome-webfont.woff2
http://vikramrao.com/fonts/fontawesome-webfont.woff
http://vikramrao.com/fonts/fontawesome-webfont.ttf
Don't exists, it throws 404 error (not found)
You should create this folder and upload this files.
I saw your code structure and found that you provided improper path for font in stylesheet. See my screen capture
Related
I'm using font awesome CDN to use the icons but not all icon do show, i put 2 examples of 2 icons, the first one shows and the second does not, it rather shows as an X inside a square, what is going on ?
<!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>Alarabiyah | Breaking News From Around The World</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-
xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="header">
<div class="header__top">
<div class="header__top-logo-container">
<img src="logo.png" alt="logo" class="header__top-logo-image" />
</div>
<div class="header__top-controls">
<i class="fa-solid fa-magnifying-glass"></i> // SHOW
<i class="fa-regular fa-magnifying-glass"></i> // SHOWS AS AN X INSIDE A SQUARE
<div class="header__top-theme"></div>
</div>
</div>
</header>
</body>
</html>
i have tried using different CDNs, i've also used the Font Awesome Kit, but it doesn't change anything
It is because "fa-regular fa-magnifying-glass" is not free. You can check this out using below link:
Font awesome free icons
First example is not showing, but second example is showing. Why?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>
<body>
<i class="fa-solid fa-square-info"></i> NOT SHOWING
<i class="fas fa-info-circle"></i> SHOWING
</body>
</html>
This is because the icon fa-solid fa-square-info is a PRO icon and it's not available for use in the free version of font-awesome. So the icon is not rendering. Alternatively you can try using Material Design Icons which is open source and free to use.
No idea why I can't seem to be able to import a styles.css file into a standard HTML page.
The code compiles, but my page doesn't receive any changes whatsoever from the css file.
src/main/resources/templates/page.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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" type="text/css" href="css/styles.css"/>
</head>
<body>
<div class="card text-center">
<div class="card-header">
<h4 class="new-header">New header</h4>
<a class="btn btn-primary new-button">New button</a>
</div>
</div>
</body>
src/main/resources/static/css/styles.css
.new-button{
float:right;
}
.new-header{
float: left;
}
I've tried switching the href directory link to several others, such as :
/css/styles.css (the one used by a similar project);
/static/css/styles.css (the IDE considers this to be the best one)
You are looking in the wrong directory. Change the href to
<link rel="stylesheet" type="text/css" href="../static/css/styles.css"/>
the double dot at the start are necessary:
../static/css/styles.css
This question already has answers here:
Font Awesome 5, why is CSS content not showing?
(6 answers)
Closed 2 years ago.
I am trying to use Awesome icons in a Laravel/Vue project. But for some reason the icon doesn't show properly, whatever I try.
I now tried the most simple thing with Awesome I could imaging: a simple HTML-page using a CDN. The 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">
<header>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</header>
<body>
<i class="fas fa-camera"></i>
</body>
</html>
But, like in my Laravel project, I am not seeing the camera icon, but some kind of dummy icon: a rectangle with F030 in it.
BTW: I run a Xampp stack under Windows.
What am I doing wrong?
<!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">
<header>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</header>
<body>
<i class="fas fa-camera"></i>
</body>
</html>
I just edited the link with a cdn link from the font-awesome page
, whatever you embed does not include your desired icon
taken from here
I hosted a site on Github pages, and the material icons are not showing. The issue is that they are showing when I launch the index.html page from my browser (instead of going to the hosted page).
Here's the html for this part:
<head>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content blue-text text-darken-2">
<span class="card-title">Olivier Grech</span>
<p>Text</p>
<div><i class="material-icons">phone</i><em>Phone</em></div>
<div><i class="material-icons">email</i><em>mail</em></div>
</div>
</div>
</div>
<!--Rest of the page-->
Replace http with https and it will work:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
If you open your developer tools(right click anywhere and click inspect, then go to the console), it would tell you whats wrong. In this case you were accessing the github page over https but were trying to load the font using http which is not considered safe and was blocked by the browser.