I have problem, I am trying to get the same result as in the example (Fontawesom) https://fortawesome.github.io/Font-Awesome/examples/
I want to implement
Fixed Width Icons
I have downloaded FontAwesome package in my folder and add link in head I have also tried CDN like but the same result. Icons are showed but styles are not applied as in the example.
http://imgur.com/3KZgMoV
Here is my result
<link rel="stylesheet" href="css/font-awesome.min.css">
And list
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
Please help, what I am doing wrong ?
The styles are not the same because you have the fontawesoms icons in an anchor tag, so the icons are inheriting the anchors styles. Just override those styles, like:
.list-group-item{
color: #000; /* black */
text-decoration: none; /* remove the underline */
display: block; /* to make the anchors take full width */
}
Well to achieve this you have to update your CSS accordingly. change color and size of your font as per your requirement.
Related
I'm trying to show an icon on my website but it only works when I remove the id from de a tag.
This is the code:
#link_facebook {
color: #3b5998;
}
<a class="nav-link" id="link_facebook" href="#" role="button" target="_blank">
<i class="fa-brands fa-facebook"></i>
</a>
Put the color on the i element.
i {
color: #3b5998;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<a class="nav-link" id="link_facebook" href="#" role="button" target="_blank">
<i class="fa-brands fa-facebook"></i>
</a>
You need to understand about specificity in CSS. You can take a look the document here https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
About your style, It can may no apply when the tag i or fa-brands or fa-facebook has color style. So for your case you can do like this:
#link_facebook i {
color: #3b5998;
}
I have a certain navbar as shown in the figure 2 . I want them to be in figure 1 when i minimize the browser .ie i need a responsive design.
The code i have tried is...
https://codepen.io/poornam/pen/dyGMmdp
<nav class="navbar-custom navbar navbar-expand-sm ">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class=" navbar-brand nav-link" href="#">balakrsihnan#gmail.com</a>
</li>
<li class="nav-item">
<a class=" navbar-brand nav-link" href="#">+91-9446558430</a>
</li>
</ul>
<div>
</div>
</nav>
figure 1
figure 2
This answer presumes that you are looking for a solution that utilizes Bootstrap 4.x though neither the code presented here or on your Codepen example clarify if you're using the most recent version or an older. With that being said:
By default the Navbar component is going to try to organize everything horizontally. Breaking out of this behavior is fairly straightforward using Bootstrap's various utility classes. In the example below d-flex does all the heavy lifting.
.navbar.navbar-custom {
background: #000;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text,
.navbar-custom .active {
color: #fff;
}
.navbar.navbar-custom .active {
display: inline-flex;
background: #ff0000;
border-radius: 50%;
margin: 0.125rem;
font-size: 1.5rem;
padding: 0.75rem 0.625rem;
text-decoration: none;
}
<nav class="navbar navbar-custom">
<div class="d-flex mr-sm-auto py-2">
<span class="fa fa-envelope fa-fw mr-1"></span>balakrsihnan#gmail.com
<span class="fa fa-phone fa-fw mr-1"></span>+91-9446558430
</div>
<div class="d-flex ml-sm-auto">
<span class="fab fa-fw fa-facebook"></span>
<span class="fab fa-fw fa-twitter"></span>
<span class="fab fa-fw fa-google"></span>
<span class="fab fa-fw fa-linkedin"></span>
<span class="fab fa-fw fa-youtube"></span>
<span class="fab fa-fw fa-instagram"></span>
<span class="fab fa-fw fa-pinterest"></span>
</div>
</nav>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
Your duplicate use of .navbar-brand seemed unnecessary to me and counter-intuitive to that classes purpose. I've wrapped your two hyperlinks in <div lass="d-flex mr-sm-auto py-2">...</div> which does the following:
Ensures the child elements will behave like flex children.
Makes sure on 'Small' breakpoint screens (and above) that we're pushing this to the left
Applies a top/bottom padding (PY-2)
A similar behavior is applied to the <div> that was housing your social media links. Applying flex behavior here lets everything get organized nicely. And we can ensure that this element aligns to the right of the screen using ml-sm-auto.
The format of the social media icons has also been updated to provide you more granular control of the shape / output. <font awesome icon>.
As we can see in the sidebar the icons are aligned left, but the text not.
So the question is: How can i align the icons and the text?
Example code is
<li [routerLinkActive]=" ['active']" [routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['/notificaciones/listado']">
<i class="fa fa-bell"></i> {{'notifications' | translate}}
</a>
</li>
<li [routerLinkActive]=" ['active']" [routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['/analitica-avanzada/grafica']">
<i class="fas fa-chart-line"></i> {{'advance-analytics' | translate}}
</a>
</li>
You are using FontAwesome in your example.
FontAwesome 5+ itself shows the solution:
Just use "fa-fw" in the icons-class.
https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
<div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
<div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
<div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
<div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
<div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
you should have the same width for all the icons, so in your css you can do something like:
i{
width: 12px;
margin-right: 4px;
}
Please change the values according your needs.
The best way is wrap the fontawesome <i> tag using another <span> tag, and apply a min-width value.
HTML
<li [routerLinkActive]=" ['active']" [routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['/notificaciones/listado']">
<span class="fa-icon">
<i class="fa fa-bell"></i>
</span>
{{'notifications' | translate}}
</a>
</li>
CSS
.fa-icon {
display: inline-flex;
min-width: 20px;
justify-content: flex-start;
}
I add fontawesome icon with square this worked for me:
HTML:
<ul class="list-inline">
<li><a href="#">
<span class="fa-stack fa-lg icon-facebook">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
</a></li>
<li><a href="#">
<span class="fa-stack fa-lg icon-twitter">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a></li>
<li><a href="#">
<span class="fa-stack fa-lg icon-gplus">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x"></i>
</span>
</a></li>
</ul>
CSS:
.fa-stack-1x {
color:white;
border-radius:0;
}
.fa-square{
border-radius:0;
}
.icon-facebook {
color:#3b5998;
}
.icon-twitter {
color:#00aced;
}
.icon-gplus{
color:#dd4b39;
}
body {
background-color: black;
}
I need to show square without border radius and I add border-radius:0; for class .fa-square But font awesome not work without border radius.
how do can i fix this ?
DEMO JSFIDDLE
As others mentioned the "square" behind the icon is actually a font icon applied to .fa-square:before in the css.
Unfortunately the Font Awesome set at this time does not contain a true square.
However they do have an icon in their set with much harder corners called the "stop" icon (in the video player icon group). You can substitute this for the "square" in your css to get a much better square stack by doing this. It does make a very slight radius corner, but at small sizes it's hardly noticable:
.fa-square:before {
content: "\f04d";
}
"\f04d" is the CSS content value for the stop icon in Font Awesome.
List of CSS content values for Fontawesome Icons
http://astronautweb.co/snippet/font-awesome/
Results
Image of results
Cheers!
fa-square:before{content:"\f0c8"} is going to cause an issue. You can fix it by removing that class. Then overriding the border-radius for each of the fa-stack-1x icons.
<ul class="list-inline">
<li><a href="#">
<span class="fa-stack fa-lg icon-facebook">
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
</a>
</li>
<li><a href="#">
<span class="fa-stack fa-lg icon-twitter">
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
</li>
<li><a href="#">
<span class="fa-stack fa-lg icon-gplus">
<i class="fa fa-plus fa-stack-1x"></i>
</span>
</a>
</li>
</ul>
CSS:
body {
background-color: black;
}
.fa-stack-1x {
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
color:white;
}
.icon-facebook>.fa-stack-1x {
background-color:#3b5998;
}
.icon-twitter>.fa-stack-1x {
background-color:#00aced;
}
.icon-gplus>.fa-stack-1x {
background-color:#dd4b39;
}
For squares just change the border-radius's to 0px; in the above CSS
I looked into font-awesome.min.css and found this line: fa-square:before{content:"\f0c8"} I believe that means you are using \f0c8 to draw the square. That means it is a character from awesome font and you can't change it by border-radius.
You can read about this icon at
http://www.utf8icons.com/character/61640/UTF-8-character
What's the best way to get a space between the link/paragraph and the icon?
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply"></i>Change
Doesn't work to just put a space before the text because it will be changed back when you minify/uglify the project.
I tried with all kinds of padding and margins. Can't get them to separate.
I would use the .fa-fw class. For example: <i class="fa fa-cog fa-fw"> This adds a visual space (that won't get stripped out) and it's consistent, so when/if the elements stack it looks a lot better.
Instructions: https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
Don't know if is the best but you can add some margin-right to the i element:
i {
margin-right: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply"></i>Change
Old question but I didn't liked any of these answers so I did it this way:
<i class="fa fa-cloud"></i> <span class="ml-1">Resume</span>
I kinda hate CSS or dirty html and I prefer working only with classes but fa-fw isn't useful with some icons. Not sure if span is the way to go but it looks good in my project.
So you can just wrap your text around something and give it a margin in which direction you want.
I guess i is display: inline so you'll have to set its display to inline-block for margin-right to work :
i {
display: inline-block;
margin-right: 1em;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply"></i>Change
There are 2 spaces you need to add to make the UI look good. First, before the icon and a little space in between the icon and the text field.
So for the first case you need to add a font awesome class
fa-fw
class. for the second case, we just need a Non-Breaking Space.
 
This way you will not need an extra class to be added.
Below is a sample code to explain this.
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
Since I just came across the same question I took a closer look at Christina's suggestion from the font-awesome example page (sorry, I'm not allowed to just comment yet).
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
The most distance here is gained by (see screen 1) rather than from fa-fw see screen 2 since this is just unifying the width of the font-icon itself, so for a nicer look you may want to go for both.
(which will be interpreted as a space then) also should not make any troubles while minifying based on some quick tests.
Just use this:
a > i{
padding-right:10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply "></i>Change
<i class="fa fa-cloud mr-2"></i>
This integrates Bootstrap as well as does not require for any extra tags!
None of the answers here worked for me. I had to do this:
<i class="fa fa-reply"><span>Change</span></i>
i span {
display: inline-block;
margin-left: 0.3rem;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply" style="padding-right:5px"></i>Change
you can do inner css after -class="fa fa-reply"- put -style="padding-right:5px"-
note: if you doing more then one icon type the padding size will be different by 1 or -1 px
or just put a space before the word like this
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-
awesome.min.css" rel="stylesheet">
<i class="fa fa-reply"></i> Change