I'm trying to solve the problem with invisible icons?
HTML
<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 rel="stylesheet" href="css/main.css">
</head>
<body>
<i class="fa fa-angle-up">cos tam</i>
</body>
CSS
#import url("fontawesome.min.css");
body{
margin: 0;
padding: 0;
}
enter image description here
Check which version you are using, based on that you might need to change the classes.
https://fontawesome.com/v5.15/icons/angle-up?style=solid
From the folder image you shared it is located at the same level as your main.css, so your path should be correct:
#import url("fontawesome.min.css");
But try in case:
#import url("../css/fontawesome.min.css");
#import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
<i class="fas fa-angle-up"></i>
Use the link tag from https://cdnjs.com/libraries/font-awesome , and add that in the head section.
<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css"/>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<i class="fa fa-angle-up">cos tam</i>
</body>
Related
I'm currently using GitHub to host a website. I'm using Font Awesome to get some icons. During testing, everything worked perfectly, but when deploying to Github, the icons disappear.
<!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>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
crossorigin="anonymous">
</head>
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
Have I made a mistake when writing the code? And if not, is there another way to link CSS to HTML Page? I have tried a couple different ways of writing it but nothing seems to work.
Here's how I wrote it...
<head>
<title>Quiz App</title>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
I also tried...
<head>
<title>Quiz App</title>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link = rel="stylesheet" href="css/style.css"/>
</head>
Thanks
You wrote viewport as viewpoint in your meta tag.
In your first snippet, change this:
<meta name="viewpoint" content="width=device-width, initial-scale=1">
To this:
<meta name="viewport" content="width=device-width, initial-scale=1">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>Image Editor</title>
</head>
<body>
<nav class="navbar navbar-dark bg-info mb-5">
<div class="container">
Online Image Filter
</div>
</nav>
</body>
</html>
I'm trying to use bootswatch and I'm unable to. Do I have it sourced right? I'm currently unable to apply any of its css styles in my html file and I'd like some clarification as to why.
How can I resolve the print of special character in Angular (see in file attachment)?
In my index.html, I define :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LoginCCPD</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>