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
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>
<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/
<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
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.
I'm just following a bootstrap tutorial, but I got stuck with some weird thing.
chrome and safari show mobile collapse differently with the same code.
I even tried 'copy and paste'!!
this is mobile nav-collapse on safari which it is a correct view.
but on chrome, it just doesn't work somehow.
this is the same one on chrome.
i got no error on console.
I used bower to download jquery and bootstrap.
this is the html code.
main.js and main.css are just empty files.
this is just a very basic bootstrap... but I don't know why..
how can I fix it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Design Tutorial | RevillWeb.com</title>
<!-- Include bootstrap CSS -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/assets/main.css">
</head>
<body>
<!-- Site header and navigation -->
<header class="top" role="header">
<div class="container">
<a href="#" class="navbar-brand pull-left">
BS3 TUTORIAL
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="navbar-nav nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Include jQuery and bootstrap JS plugins -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/main.js"></script>
</body>
</html>