I got Font Awesome 5 to work using:
<i class="fa fa-user"></i>
<script src="/js/packs/solid.js"></script>
<script src="/js/fontawesome.js"></script>
But styling the i tag didn't have any effect. So I tried using a web-font instead:
<link rel="stylesheet" href="css/font-awesome-core.css">
<link rel="stylesheet" href="css/font-awesome-solid.css">
<i class="fas fa-user"></i>
and it worked. But shouldn't I be using the svg framework? I'm not a Font Awesome traditionalist. Can you style fonts with different colors, sizes and rotations?
The FontAwesome5 SVG framework converts the tag into the fully rendered SVG code in the source.
The styling of the icon/SVG can be controlled by styling the parent.
<div style="font-size: 200%; color: red">
<i class="fas fa-user"></i>
</div>
This will render the icon at 2x size and in red.
Related
I am using Font Awesome 5 (brands). The tiktok Icon is displayed as a stack of books instead of the stylized T.
Attempted using the local directory of Font-Awesome as well as linking the style with the url.
My other site is displaying the icon properly, using the same stylesheets and font-awesome version.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<a style="font-size: 3vh" class="social-button sb-facebook shape-none sb-light-skin"><i class="fab fa-facebook"></i></a>
<a style="font-size: 3vh" class="social-button sb-instagram shape-none sb-light-skin"><i class="fab fa-instagram"></i></a>
<a style="font-size: 3vh" class="social-button sb-tiktok shape-none sb-light-skin"><i class="fab fa-tiktok"></i></a>
error icon
expected icons
class pulls font-awesome.
Any advise would be much appreciated
I have some font awesome icons that I want to change to a different color but for some reason it will not work. Here's my html and css:
HTML
<span><i class="fas fa-globe fa-5x change-color"></i></span>
CSS
.change-color {
color: #3993e5 !important;
}
I fixed it.
I just had to wrap the icon with a div
<span><div><i class="fas fa-globe fa-5x change-color"></i></div></span>
Will if you using the js file from FontAwosem you should know that this I HTML tag will be removed and replaced with SVG tag so all you need to do is say something like that in your CSS file
svg {
color: white;
}
Be sure that your icon font-family is Font-awesome.
.change-color {
font-family:FontAwesome;
color:red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fas fa-globe fa-5x change-color"></i></a>
I'm trying to customize the navbar toggler icon of bootstrap with font-awesome but my code is not working why?I'm using font-awesome CDN.
<span class="navbar-toggler-icon">
<i class="fas fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>
This code is showing just 2 white lines on the hamburger toggle icon of bootstrap.
I assume you are using BS4x. You just need to reset the default SVG background image and specify your desired alternative in CSS:
<span class="navbar-toggler-icon"></span>
.navbar-toggler-icon {
background-image: none;
}
.navbar-toggler-icon::before {
font-family: FontAwesome;
content: "\f0c9"; /* fa-bars, fa-navicon */
}
FontAwesome is for FA < v5, for FA > v5 use 'Font Awesome\ 5 Free' (afaik)
By that you also avoid dirty inline CSS. Simply apply the needed rules such as color and font-size to the .navbar-toggler-icon::before class.
There is no fas fa-navicon in Font Awesome 5. Use fas fa-bars for Font Awesome 5.
You may see the icon reference from w3school link.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<span class="navbar-toggler-icon">
<i class="fas fa-bars" style="color:#000; font-size:28px;></i>
</span>
Using Visual Studio Code the following simple embed of a FA icon in version 5 produces a very small underline artefact in a browser.
<i class="fab fa-twitter"></i>
The single white space before the closing </a> tag is the culprit. An obvious solution is not to use a space! However if using a code editor code formatting will inevitably produce plenty of white space which although reduced by the browser to a single white space the artefact will inevitably appear.
The only solution I have is to use a suitable CSS selector to prevent the underline occurring.
Can anyone suggest anything else?
That's definitely not your editor that's formatting oddly, it's how the browser renders an anchor when it is nested within an element and is at default styles. The default styles are:
a {
text-decoration: underline;
display: inline
}
If you overwrite either one of these properties, you shouldn't see those artifacts. Any of these particular styles will fix the problem:
a {
display: inline-block; /* or block */
text-decoration: none
}
In the following Demo, click the top 3 icons to toggle between the styles.
Demo
#bk:target {
display: block
}
#ib:target {
display: inline-block
}
#td:target {
text-decoration: none
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Artifact</title>
<meta name="viewport" content="width=960">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
</head>
<body>
<p>Observe the small artefacts in the first 3 icons when formatted...</p>
<a href="#bk" id='bk'>
<i class="fab fa-twitter fa-5x"></i>
</a>
<a href="#ib" id='ib'>
<i class="fab fa-facebook-f fa-5x"></i>
</a>
<a href="#td" id='td'>
<i class="fab fa-pinterest fa-5x"></i>
</a>
<p>...and none in the next three.</p>
<i class="fab fa-twitter fa-5x"></i>
<i class="fab fa-facebook-f fa-5x"></i>
<i class="fab fa-pinterest fa-5x"></i>
<p>The first set of 3 icons are modified to demonstrate that the 3 CSS properties can fix the artifacts. Simply click any of first 3 icons and observe the removal of that particular artifact. The links are using the `:target` pseudo-class for this interaction
so all three behave as if only one of them can be active at a time (like a group of identically named radio buttons.)</p>
</body>
</html>
I want to have the background color fill the entire page. So far, I have an image that is the background, but sometimes doesn't load.
So I would like to set it with css.
This is my body section:
body {
background-color: gray;
margin: 0;
}
This is my entire html files that is not working.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://sammyandsam.x10.bz/css/font-awesome.css">
<meta name="robots" content="noindex">
<script src="http://sammyandsam.x10.bz/js/snow.js"></script>
<meta name="description" content="Sammyandsam's page">
<link rel="stylesheet" type="text/css" href="http://sammyandsam.x10.bz/css/bootstrap.css">
<link rel="shortcut icon" href="http://sammyandsam.x10.bz/favicon.png"/>
<title>[ Sammyandsam ]</title>
</head>
<body>
<div class="header">
<h1>[ Sammyandsam ]</h1>
<div class="icons">
<i class="fa fa-twitter"></i> Twitter |
<i class="fa fa-steam"></i> Steam |
<i class="fa fa-github"></i> Github |
<i class="fa fa-tumblr"></i> Tumblr
</div>
</div>
<div class="content">
<h2>About <a class="btn btn-info" role="button" href="/about/"><span class="glyphicon glyphicon-circle-arrow-right"></span></a></h2>
<h2>Projects <a class="btn btn-info" role="button" href="/projects/"><span class="glyphicon glyphicon-circle-arrow-right"></span></a></h2>
<h2>Repo <a class="btn btn-info" role="button" href="/repo/"><span class="glyphicon glyphicon-circle-arrow-right"></span></a></h2>
</div>
</body>
</html>
It will not set the background. It stays white for some reason.
I have tried setting each div a background color, but it will not fit the entire page.
Any idea what to do?
How to fix: DO NOT PUT CUSTOM CSS INTO BOOTSTRAP. Make a seperate .css file with your css in there.
Two possibilities I can think of are:
1) Your style is being overridden by another style. You could try background-color: gray !important; and see if that works.
2) Your body doesn't actually have any height (i.e. if there are floated items that haven't been cleared) Inspect it in Chrome or Firefox and make sure the body takes up the full height of the page.
You just didn't linked any CSS file with your HTML Document. So first link it with your document or you can use inline css like
<body style="background-color: gray" >
If this not working then you can try like this.
<body style="background-color: gray !important" >
Hopes your problem will solve.
I had the similar issue the solution was to link the CSS file after the bootstrap CDN link. So that our custom styling is prioritized.
Well in that scenario try to put inline style if that doesn't work for you then make sure that your body has width and height attributes.