<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.03.0/css/font-awesome.min.css">
</head>
<body>
<i class="fas fa-rupee-sign"></i>
</body>
</html>
This is not working
How can I use symbols from font awesome in my website online
just replace the link tag with this
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
and with this tag as icon tag
<i class="fa fa-inr" aria-hidden="true"></i>
If you look at the console, you'll see that you can't access this href link. Try this way:
<html>
<head>
<script src="https://use.fontawesome.com/29ecae9da7.js"></script>
</head>
<body>
<i class="fa fa-camera-retro fa-5x"></i>
</body>
</html>
Here you can find the icons: https://fontawesome.com/v4.7.0/icons/
Related
I'm failing to show Font Awesome icons on my app (only this page)! The icons are showing on the other pages but not on this one I don't know why! and yes I'm importing it in my index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
A link to codesandbox for better viewing
Here the code:
export default function Post({ post }) {
return (
<div className="coupon-container">
<div className="coupon">
<div className="content">
<h2>TITLE GOES HERE</h2>
<h1>
TEXT <span>TEXT</span>
</h1>
</div>
<div className="couponValidity">
<i className="fa fa-solid fa-timer"></i>
<p>SOME TEXT GOES HERE</p>
</div>
</div>
</div>
);
}
The icon you're using doesn't exist on the style you've imported. as I see the timer icon is a pro icon. but if you choose another icon, like:
<i className="fa fa-user"></i>
then the icon is rendered.
this works on me
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
</head>
<body>
<i class="fa fa-user"></i>
<p>SOME TEXT GOES HERE</p>
</body>
</html>
I use bootstrap-cosmo.css v3.3.7 and file contain glyphicon -glyphicon-duplicate
.glyphicon-duplicate:before {
content: "\e224";
}
but when I use it. It won't show up.
<a class="btn btn-danger btn-circle">
<i class="glyphicon glyphicon-duplicate"></i>
</a>
Any suggestion? I am using .NET ASP
Glyphicon like glyphicon glyphicon-remove works fine.
Check your stylesheets links and bootstrap load.
Here you can see it work fine.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div>
This is a test page
<p>
<i class="material-icons">face</i>
<i class="large material-icons">face</i>
<i class="material-icons md-18">face</i>
<i class="material-icons dark">face</i>
</p>
</div>
</body>
I see all the icons are same, there is not style applied. Am I doing something wrong or is this not working?
Thanks,Rajesh
I got the answer, I have to use an external CSS, the Google Material Fonts don't have CSS styles
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<i class="blue-text text-darken-2 large material-icons ">invert_colors</i>
</p>
Thanks,
Rajesh
How should I fix this so that the github icon shows in the navbar?
<a class="navbar-brand pull-sm-right m-r-0" href="https://github.com/monajalal"><i class="fa fa-github">Github</i></a>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<a class="navbar-brand pull-sm-right m-r-0" href="https://github.com/monajalal"><i class="fa fa-github">Github</i></a>
</body>
</html>
Did you add font-awesome.min.css to your project?
Here is the working jsFiddle
I am trying to load search glyphicon with the following:
<div tabindex="6" class="glyphicon glyphicon-search">...<.div>
But, glyphicon loading as the following:
What is the solution?
background-color:none transparent}#font-face{font-family:'Glyphicons Halflings';src:url(/css/fonts/glyphicons-halflings-regular.eot);src:url(/css/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(/css/fonts/glyphicons-halflings-regular.woff) format('woff'),url(/css/fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(/css/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular)
Check this code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<div tabindex="6">
<span class="glyphicon glyphicon-search"></span>
<div>
</body>
</html>
Here is Bootstrap3.2.0 downloaded from Bootstrap site
Unpack and run below code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="bootstrap3.2.0/css/bootstrap.min.css">
</head>
<body>
<div tabindex="6">
<span class="glyphicon glyphicon-search"></span>
<div>
</body>
</html>
Worked as like as BS3.5
Though a late answer, for someone who has this issue:
Using Bootstrap's CDN in the tag solved this issue for me.