Customize navbar toggler icon of bootstrap - html

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>

Related

Color Change for Font Awesome Icon Not Working

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>

Unable to change the Font Awesome icon color when moving the mouse over the icon

I have the following Font Awesome icon:-
<a asp-action="Edit" asp-route-id="#item.Id"><i class="fas fa-marker fa-lg" ></i></a> |
by default the icon color will be blank and blue when hover over it. now i want to change the icon color to red and blue on hover, so i add the following:-
<a asp-action="Edit" asp-route-id="#item.Id"><i class="fas fa-marker fa-lg" style="color:#ff4c4c;"></i></a> |
but i lost the hover color, so i added this css:-
.fa-marker:hover
{color:blue}
but did not have any effect. any advice how i can change the hover color for the icon?
Use !important which ignores all other styles, the reason your code wasn't working was the style priority, all the styles given directly from style=""attribute have higher priority
.fa-marker:hover {
color: blue !important
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<a asp-action="Edit" asp-route-id="#item.Id"><i class="fas fa-marker fa-lg" style="color:#ff4c4c;"></i></a>

How to resize icons using the svg framework

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.

How do I decrease the size of a font-awesome icon?

What is the best way to decrease the size of a font awesome icon. There is a fa-3x, etc... to increase the size. Is there a class to decrease the size?
Font-Awesome icons, as the name suggests, are font-based. This means to decrease their size all you have to do is decrease their font-size:
.fa {
font-size: 12px;
}
There are two Font Awesome classes to use if you need something simple: fa-xs and fa-sm.
The size equivalents are:
fa-xs: .75em
fa-sm: .875em
Sizing Icons | Font Awesome (more informations here)
Font-Awesome icon size modification:
"font-size" property in "style" attribute:
<i class="fas fa-search" style="font-size: 25px;"></i>
"font-size" property in CSS stylesheet (like the accepted answer shows)
.fa {
font-size: 12px;
}
HTML tags
<small>
<i class="fas fa-search"></i>
</small>
Using Fontawesome classes so that the icons take a size relative to their parent elements:
<i class="fas fa-search fa-sm"></i>
<i class="fas fa-search fa-lg"></i>
One way is your internal CSS class or use default Font Awesome class:
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-md"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
and keep going wit fa-4x and so one.
The Docs for smart use icons can be found here Font Awesome Docs Sizing and css you could use will find documented there as well.
Font-Awesome icons, as the name suggests, are font-based. This means to decrease their size all you have to do is decrease their font-size:
::before {
font-size: 130px;
}

Using Numbers With Font Awesome

I want to use numbers to list steps in a process. I was curious about how to do this with Font Awesome.
I'd like to use circles with a 1, 2, 3... in it. Is this possible?
Will Font Awesome be adding numbers to the list of icons?
Thanks!
Font awesome actually has built-in support for stacking regular text (i.e. numbers, letters, ..) on top of icons.
Here is a nice example of a calendar icon with the actual day of the month as plain text. As the post also explains you might need to throw in some extra styling for optimal positioning.
HTML:
<span class="fa-stack fa-3x">
<i class="fa fa-calendar-o fa-stack-2x"></i>
<strong class="fa-stack-1x calendar-text">27</strong>
</span>
CSS:
.calendar-text { margin-top: .3em; }
Following code will give a circle with a number
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<strong class="fa-stack-1x">1</strong>
</span>
Following code will give a solid circle with a number
<span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<strong class="fa-stack-1x text-primary">1</strong>
</span>
Here the text-primary class (from bootstrap) is used to set the colour of the number
To include letters and numbers would make the style sheet for FA way too large and they do not support it ( https://github.com/FortAwesome/Font-Awesome/issues/5019 ). so what i do is like such:
.fa-alph {
font-family: Arial, sans-serif; /* your font family here! */
font-weight: bold;
color: #860000;
font-style: normal;
}
then
<button class="btn btn-default" type="button"><i class="fa-alph">2</i></button>
this leaves a nice clean font and you can still use the silly i ( em ) to keep trakc of "icons." Plus this keeps all icon type characters within the same elemental scope... (.fa-^)
I believe this thread was for an icon with a circle around it. So you would modify this CSS above to make it a <span> instead of a <button> and creat a block element in your span.
.f-circle {
font-family: Arial; /* your font family here! */
font-weight: bold;
display: block;
border: 1px solid #860000;
border-radius: 999px;
padding: 6px 12px;
}
then
<span class="f-circle"><i class="fa-alph">2</i></span>
You can just do something like this instead :
<i class="fa fa-star" aria-hidden="true"> 1</i>
<i class="fa fa-star" aria-hidden="true"> 2</i>
<i class="fa fa-star" aria-hidden="true"> 3</i>
...
I find this works nicely within WordPress widgets (after adding in the CDN styesheet to the header):
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa-stack-1x fa-inverse">1</i>
</span>
As an alternative to font awesome and HTML/CSS, find an example you like and create something similar in Photoshop. Export the PNGs. Takes about 10 minutes.
Not that I know off! Actually Font awesome is a font used to render icons only. Here is a list of possible icons Fontawesome-icons.
You could do this in many other ways i would do it using one of this 2 other methods depending on what your looking for. For example...
A simple circle with a number inside, the way I would go would be with CSS, creating a circle and using normal text inside. There are tons of posts/examples in google for that. Here is one : how to create circles with css
If you want to achive this with something more graphic/icon I suggest taking a look at Fontello, this creates a font out of your own svg files. So you could do your own numbers with images as background and render the numbers as icons just like fontawesome does.
Have a good one!
Pancho