Font awesome 6 icons not showing when using ids - html

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;
}

Related

How can I only show the icons and not the text when sidebar is compressed

here's how it looks like when expanded
I want to hide the text and only show the icons when sidebar menu is toggled and sidebar container is compressed
<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" />
<div class="sidebar">
<a th:href="#{/dashboard/}" class="sidebar-menu"><span class="fas fa-home"></span>Dashboard</a>
<a th:href="#{/profile/}" class="sidebar-menu"><span class="fas fa-user"></span>Admin Profile</a>
<a th:href="#{/notification/}" class="sidebar-menu"><span class="fas fa-bell"></span>Notifications</a>
<a th:href="#{/account/}" class="sidebar-menu"><span class="fas fa-users"></span>User Accounts</a>
<a th:href="#{/product/}" class="sidebar-menu"><span class="fas fa-list"></span>Product List</a>
<a th:href="#{/order/}" class="sidebar-menu"><span class="fas fa-shopping-cart"></span>Transactions</a>
<a th:href="#{/report/}" class="sidebar-menu"><span class="fas fa-chart-line"></span>Sales report</a>
</div>
Please help
<div class="sidebar compressed">
<a th:href="#{/dashboard/}" class="sidebar-menu"><span class="fas fa-home"></span><span class="menu-text">Dashboard</span></a>
<a th:href="#{/profile/}" class="sidebar-menu"><span class="fas fa-user"></span><span class="menu-text">Admin Profile</span></a>
<a th:href="#{/notification/}" class="sidebar-menu"><span class="fas fa-bell"></span><span class="menu-text">Notifications</span></a>
<a th:href="#{/account/}" class="sidebar-menu"><span class="fas fa-users"></span><span class="menu-text">User Accounts</span></a>
<a th:href="#{/product/}" class="sidebar-menu"><span class="fas fa-list"></span><span class="menu-text">Product List</span></a>
<a th:href="#{/order/}" class="sidebar-menu"><span class="fas fa-shopping-cart"></span><span class="menu-text">Transactions</span></a>
<a th:href="#{/report/}" class="sidebar-menu"><span class="fas fa-chart-line"></span><span class="menu-text">Sales report</span></a>
wrap the text in span and add compressed class when sidebar is compressed and remove the class when sidebar is expanded. Then add below css:
.sidebar.compressed .menu-text{display:none}
You cannot use a css selector to target text nodes. (There is an experimental feature called ::target-text, but this will not help you in this case anyway).
You should wrap the text in an element (most likely a span) and then use a selector for that to show/hide the text.
Below a possible solution for your issue.
I've wrappen a span around the text of the navbar items to easily address them using CSS.
The word 'compress' is used to allow the text to disappear. You need to hover it with the mouse.
Required CSS is added to let the text disappear.
.sidebar {
display: flex;
flex-direction: column;
}
.fas {
width: 40px;
text-align: center;
}
#compress:hover~a>.nav-text {
display: none;
}
<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"
/>
<div class="sidebar">
<div id="compress">Compress</div>
<a th:href="#{/dashboard/}" class="sidebar-menu"><span class="fas fa-home"></span><span class="nav-text">Dashboard</span></a>
<a th:href="#{/profile/}" class="sidebar-menu"><span class="fas fa-user"></span><span class="nav-text">Admin Profile</span></a>
<a th:href="#{/notification/}" class="sidebar-menu"><span class="fas fa-bell"></span><span class="nav-text">Notifications</span></a>
<a th:href="#{/account/}" class="sidebar-menu"><span class="fas fa-users"></span><span class="nav-text">User Accounts</span></a>
<a th:href="#{/product/}" class="sidebar-menu"><span class="fas fa-list"></span><span class="nav-text">Product List</span></a>
<a th:href="#{/order/}" class="sidebar-menu"><span class="fas fa-shopping-cart"></span><span class="nav-text">Transactions</span></a>
<a th:href="#{/report/}" class="sidebar-menu"><span class="fas fa-chart-line"></span><span class="nav-text">Sales report</span></a>
</div>

Links not working in Font Awesome Social media Icon Menu

I am trying to make a social media menu, the Font Awesome Icons are all visible and the way I want but the hyperlink is not working on it.....
Here is my code:
.sm-list {
display: flex;
}
.sm-link {
color: #929FC5;
width: 3rem;
height: 3rem;
border: 1px solid #929FC5;
border-radius: 90%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.5rem;
}
.sm-link:last-child {
margin-right: 0;
}
.sm-link:hover {
background-image: linear-gradient(to right, #A971FF, #00F0FF);
color: #FFF;
}
<div class="sm-list">
<a href="https://www.facebook.com/" class="sm-link">
<i class="fab fa-facebook"></i>
</a>
<a href="https://www.instagram.com/" class="sm-link">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.twitter.com/" class="sm-link">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.youtube.com/" class="sm-link">
<i class="fab fa-youtube"></i>
</a>
</div>
I was able to load the icons with the following code. You must first load the Font Awesome in the head tag
<head>
<link rel="stylesheet" href="mystyle.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="sm-list">
<a href="https://www.facebook.com/" class="sm-link">
<i class="fab fa-facebook"></i>
</a>
<a href="https://www.instagram.com/" class="sm-link">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.twitter.com/" class="sm-link">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.youtube.com/" class="sm-link">
<i class="fab fa-youtube"></i>
</a>
</div>
</body>

How to stop icon from changing color in Bootstrap?

I am using the following icon from fontawesome inside a Bootstrap Jumbotron:
<a href="some-link">
<i class="fab fa-github-square fa-3x"></i>
</a>
This is changing the colour of the logo to blue (Like a Hyperlink). How to retain the original colour of the icon?
To remove the link decoration, use the BS class text-decoration-none in your link.
.text-github{
color: #495057;
}
.text-github:hover{
color: #24292e;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<a href="some-link" class="text-decoration-none">
<i class="fab fa-github-square fa-3x"></i>
</a>
<!-- Example with bootstrap color
But this is in 'a' element where you need to change color -->
<a href="some-link" class="text-decoration-none text-danger">
<i class="fab fa-github-square fa-3x"></i>
</a>
<!-- Example with custom color
But this is in 'a' element where you need to change color -->
<a href="some-link" class="text-decoration-none text-github">
<i class="fab fa-github-square fa-3x"></i>
</a>
After you can set the color you wish in your a element, as there is not really native color in font-awesome.
More info text format: https://getbootstrap.com/docs/4.5/utilities/text/
More info text color: https://getbootstrap.com/docs/4.5/utilities/colors/#color
try to give the anchor tag color property. That should work .
and you may have to change a:hover color to so when you hover on it the color will remain the same.
If the color you want is not in Bootstrap
By writing style, this is easily possible
Add a class to <a>
<a href="some-link" class="logo">
<i class="fab fa-github-square fa-3x"></i>
</a>
.logo, .logo:hover{
color:#c9510c;
}

How to make icon clickable

I have some awesome icons that I would like to direct to a link when clicked. I tried wrapping them in anchor tags, but that doesn't work for some reason, what can I do? I tried two implementations.
First one
<a href ="Login.php">
<li class="nav-item border rounded-circle mx-2 cart-icon">
<i class="fas fa-shopping-cart p-2"></i>
</li>
</a>
Second one
<li class="nav-item border rounded-circle mx-2 cart-icon">
<i class="fas fa-shopping-cart p-2"></i>
</li>
Remove the list, it's not needed
<html>
<head>
<script src="https://kit.fontawesome.com/2442adcce2.js" crossorigin="anonymous"></script>
</head>
<body>
<a href ="https://www.w3schools.com">
<i class="fas fa-shopping-cart p-2"></i>
</a>
</body>
</html>
This works perfectly, feel free to reply if it doesn't work. I've tested it to make sure.

Fontawesome styles are not applied

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.