I just added a href tag to my font awesome icon, which alters its color like so:
Is there a way to remove this link color?
<i class="fa fa-facebook"></i>
In your CSS:
.fa-facebook {
color: black; /* or any other color */
}
You can't "remove" the color, but you can change the color to something else.
Simply use CSS with a class
a.black{color: #000 !important}
Or on all atags
a{color: #000 !important}
Or directly on the tag
<i class="fa fa-facebook"></i>
I'm adding the important tag, to ensure it stays black when being clicked or active.
You can change the color for all .fa icons inside anchor tags
a .fa {
color: black;
}
Demo in Stack Snippets
a .fa {
color: black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<i class="fa fa-facebook"></i>
Related
I have five links at the bottom of my page. Next to each link is an <i></i> with a Font Awesome heart icon class attribute. I am trying to have the icons not be displayed until the links are hovered over. I have a few questions/issues:
1) Display: hidden would not work on the icons. Is that normal? Visibility: hidden did make them disappear, but as with the visibility property, it did not remove them from the document flow.
2) I could not get the icons to reappear when hovering over the links. The only way I could get them to reappear on hover is by using:
.main-nav__link-container:hover .main-nav__link__icon {
visibility: initial;
}
The problem with the above CSS is that the entire div being hovered over will show the heart, which means I can hover over an area that is not a link (the area where the icon is), and the icon will pop up, but not be clickable. I only want the icon to show up when the actual link is hovered over. Any idea how to do this?
Codepen with full html/css (code associated with question is at the bottom of both the html and css). I have commented out visibility: hidden for the icons so that you can see where they are:
https://codepen.io/pmc222/pen/jvJRyg
HTML
/* Styles link flex items */
.main-nav__link {
text-decoration: none;
color: rgb(0, 0, 0);
font-family: "Montserrat", sans-serif;
font-size: 0.9rem;
letter-spacing: 0.2em;
padding-bottom: 5px;
text-transform: uppercase;
}
/* Styles icon font next to nav links */
.main-nav__link__icon {
display: none;
font-size: 0.9em;
color: rgba(0, 0, 0, 0.6);
margin-right: 3px;
visibility: hidden;
}
*unsure what selector to put here* .main-nav__link__icon {
visibility: initial;
}
/* Adds underline to links on mouse over */
.main-nav__link:hover {
border-bottom: 2px solid rgb(42, 136, 212);
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"/>
<footer id="main-footer">
<nav id="main-nav">
<div class="main-nav__link-container">
<i class="fas fa-heart main-nav__link__icon"></i>
<a class="main-nav__link" href="wedding-party.html">Wedding Party</a>
</div>
<div class="main-nav__link-container">
<i class="fas fa-heart main-nav__link__icon"></i>
<a class="main-nav__link" href="venue-information.html">Venue Information</a>
</div>
<div class="main-nav__link-container">
<i class="fas fa-heart main-nav__link__icon"></i>
<a class="main-nav__link" href="accommodations.html">Accommodations</a>
</div>
<div class="main-nav__link-container">
<i class="fas fa-heart main-nav__link__icon"></i>
<a class="main-nav__link" href="event-information.html">Event Information</a>
</div>
<div class="main-nav__link-container">
<i class="fas fa-heart main-nav__link__icon"></i>
<a class="main-nav__link" href="registry.html">Registry</a>
</div>
</nav>
</footer>
From looking at the code, the issue is that you are trying to display and hide the icons using the link class (which comes after the fa icon), whereas if you targeted the container which holds both the heart and the link, the show/hide would be successful.
If you set the visibility to hidden in your __link__icon class and then display it on hover like so:
.main-nav__link-container:hover .main-nav__link__icon {
visibility:visible;
}
it should display.
Fiddle
You should use display:none and display:block CSS rules instead display:hidden.
Some like this:
.main-nav__link {
display:none;
}
.main-nav__link: hover {
display:block;
}
So im trying to target the font-awsome icons and put a hover effect on them, i want them to change the color and also become a little bigger when hover over them. But no mather how i try to target the class i wont work.
.i:hover {
color: red;
font-size: 20px;
}
.fab fa-facebook-square:hover {
color: red;
font-size: 20px;
}
<i class="fab fa-facebook-square fa-2x"></i>
<i class="fab fa-twitter-square fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
i is not a class, it is an element. Therefore you should drop the . at the beginning
i:hover {
color: red;
font-size: 20px;
}
Also, since two classes are there in the second selector, you need to drop the white space in between like this,
.fab.fa-facebook-square:hover {
color: red;
font-size: 20px;
}
If you add a space in-between, it gives the idea that fa-facebook-square is a child of fab
And You don't need both rules, so you can remove one of them
Head over to https://www.w3schools.com/cssref/css_selectors.asp to learn more about CSS selectors.
Also, to make the transitions more smooth, you can add a small transition,
i {
color: red;
font-size: 20px;
transition: 0.2s;
}
You need to correct you selectors:
i is a html element so no need a dot .
You have to use a dot . with class name and remove the spaces as the classes belong to same element (space make a relation between parent -> child element)
i:hover {
color: red;
font-size: 20px;
}
/* This CSS is useless and can be removed
.fab.fa-facebook-square:hover {
color: red;
font-size: 20px;
}
*/
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<i class="fab fa-facebook-square fa-2x"></i>
<i class="fab fa-twitter-square fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
enter code hereWith this code you can hover on all three icon fonts.
.fab.fa-facebook-square:hover,
.fab.fa-twitter-square:hover,
.fab.fa-instagram:hover{
color: red;
font-size: 20px;
}
/*Or giving them seperate color for each icon-font
/*Blue color for Instagram*/
.fab.fa-facebook-square:hover{
color: blue;
font-size: 20px;
}
/*LightBlue color for Instagram*/
.fab.fa-twitter-square:hover{
color: #ADD8E6;
font-size: 20px;
}
/*Instagram Logo Dark Blue*/
.fab.fa-instagram:hover{
color:#125688;
font-size: 20px;
}
Part A)
i selector is'nt class,so no need .; remove it like this:
i:hover { color: red; font-size: 20px; }
Part B)
1) you miss . in fa-facebook-square selector
2) remove space between .fab and .fa-facebook-square selector,because they refer to the same element,change like this:
.fab.fa-facebook-square:hover {
Note: if you want active hover pesudo on all is,use of PartA and remove PartB.but if you want active hover pesudo just on .fa-facebook-square, remove PartA and use PartB.
CSS selectors must correctly specify the elements which you intend to target.
CSS selectors define the elements to which a set of CSS rules apply.
Ref: CSS selectors - CSS | MDN
Behaviour:
Selectors: .i:hover
Targeting elements: with class of "i", e.g: class="i"
Problem: no element with class .i can be found
Solution: use the Type Selector to target the type of element,
e.g: i
Demonstration:
Type Selector
Selects all elements that match the given node name.
Syntax: eltname
Example: i will match any <i> element.
Example:
/* to apply rule to all intended elements, specify the type of selector*/
i:hover {
color: red;
font-size: 20px;
}
* {
transition: .7s;
}
/* to apply rule to all intended elements, specify the type of selector*/
i:hover {
color: red;
font-size: 20px;
}
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<h3>To rectify the issue:</h3>
<ul class="fa-ul">
<li><i class="fab fa fa-facebook-square fa-2x"></i></li>
<li><i class="fab fa fa-twitter-square fa-2x"></i></li>
<li><i class="fab fa fa-instagram fa-2x"></i></li>
</ul>
Behaviour:
Selectors: .fab fa-facebook-square:hover
Targeting elements: containing elements, with class of "fab", that have nested elements (fa-facebook-square), e.g:
Problem: (1) no containing (parent) element with class .fab can be found, with specified nested (child) element, (2) specified nested child element, by the name of fa-facebook-square, does not exist and is not a valid html element (clearly intended to reference an element with the specified class attribute instead).
Solution: use the Class selector to target the class of the element,
e.g: .fab, or .fa, etc.
Demonstration:
Class selector
Selects all elements that have the given class attribute.
Syntax: .classname
Example: .fab will match any element that has a class of "index".
Example:
/* to apply rule to all intended elements, specify the recurring class selector*/
.fab:hover {
color: red;
font-size: 20px;
}
* {
transition: .7s;
}
/* to apply rule to all intended elements, specify the recurring class selector*/
.fab:hover {
color: red;
font-size: 20px;
}
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<h3>To rectify the issue:</h3>
<ul class="fa-ul">
<li><i class="fab fa fa-facebook-square fa-2x"></i></li>
<li><i class="fab fa fa-twitter-square fa-2x"></i></li>
<li><i class="fab fa fa-instagram fa-2x"></i></li>
</ul>
I want to change the transparent middle portion of fa-youtube-play icon to red. I try this code:
.fa {
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<i class="fa fa-youtube-play fa-3x" aria-hidden="true"></i>
</div>
But sing this code will overlaps the icon. How do I make color to the inner transparent are only?
universal means no. I'm afraid you'll have to work with each icon individually.
.fa {
background-image: radial-gradient(at center, red 40%, transparent 40%);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<i class="fa fa-youtube-play fa-3x" aria-hidden="true"></i>
</div>
You can do that by using psuedo character i.e. :after. This might help:
https://jsfiddle.net/kr8axdc3/
In CSS use the clip property like so .fa { clip: rect(0px,0px,0px,0px); }. Set to whatever values are appropriate. I believe this property only applies to images, however.
As you can see there are many ways to do it. The easiest way to fix this is to add line-height.
div .fa {
background-color:red;
line-height: 22px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<i class="fa fa-youtube-play fa-3x" aria-hidden="true"></i>
</div>
try this one,
.fa{
background-color:red;
line-height:25px;
width:40px;
}
You could even do that using pseudo selector :before as below, bit lengthy styling but adds background to that transparent area.
div {
display: inline-block;
position: relative;
}
div:before {
content: "";
position: absolute;
background: red;
width: 30px;
height: 30px;
z-index: -1;
top: 10px;
left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
<i class="fa fa-youtube-play fa-3x" aria-hidden="true"></i>
</div>
I want to change the color of two fa icons which is placed in the stack. But the color is not changed for outer icon.
HTML:
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-home fa-stack-1x fa-inverse"></i>
</span>
CSS:
.fa-home:hover{
color: yellow;
}
.fa-circle:hover{
color: white;
}
JSFiddle: http://jsfiddle.net/rajagopalx/k3c1c0bf/
Set the hover on the surrounding element:
.fa-stack:hover .fa-home {
color: yellow;
}
.fa-stack:hover .fa-circle {
color: white;
}
http://jsfiddle.net/bnh84trn/
If you change the way your css is written and target the fa-stack on hover it works great.
CSS:
.fa-stack:hover .fa-home {
color: yellow;
}
.fa-stack:hover .fa-circle
{
color: white;
}
Working example: http://jsfiddle.net/p2yLcsw0/2/
You can use hover on the wrapping element. The .fa-circle is not technically hovered, because it is hidden by the home.
This will work with any generic icon, not just home:
.fa-stack:hover .fa {
color: yellow;
}
.fa-stack:hover .fa-circle{
color: white;
}
I am using BigCommerce, and have this for my code:
.icon-cart {
color: #4ca3c0 !important;
}
.icon-cart a{
color: #4ca3c0 !important;
}
and it won't change the color of the icon. Any help?
http://glymed-plus.mybigcommerce.com/
The fontAwesome installation is messed up.
The reason color CSS attribute won't change the color of the shopping cart is because the shopping cart is being rendered by a sprite:
.icon {
display: inline-block;
width: 16px;
height: 14px;
background: url("http://cdn3.bigcommerce.com/r-13587bfb690318eb6b3c052034841f2aff994eb4/themes/ClassicNext/images/icon_sprite.png") no-repeat 0 -27px;
}
(the background is loading an image, instead of the icon).
See http://fortawesome.github.io/Font-Awesome/get-started/
You might not have copied the other folders in the installation.
If you remove the background, install the other dirs, and keep your HTML, it should work.
EDIT: You were right, fontAwesome is correctly installed.
Now change the <i> element:
<i class="fa fa-shopping-cart" title="View Cart"> </i>
You can set the size and position to better the display, but the fa and fa-shopping-cart classes must be set for showing the shopping cart icon.
Your icon is not css made, it is a png image that is loaded as the icon's background.
you cannot just 'change' its color, you need to adjust it using CSS Filters
in your case, you can apply invert on the <i> element:
-webkit-filter: invert(100%);
to change it from gray to white.
body {
background: black;
}
.icon {
display: inline-block;
width: 16px;
height: 14px;
background: url("http://cdn3.bigcommerce.com/r-13587bfb690318eb6b3c052034841f2aff994eb4/themes/ClassicNext/images/icon_sprite.png") no-repeat 0 -27px;
-webkit-filter: invert(100%);
}
.icon:hover {
-webkit-filter: invert(0%);
}
<i class="icon icon-cart" title="View Cart" style="
color: red;
"> </i>
First Remove !important
.icon-cart {
color: #4ca3c0;
}
.icon-cart a{
color: #4ca3c0;
}
now here is how you markup looks like
<a href="" title="View Cart">
<i class="icon icon-cart" title="View Cart"> </i>
<span></span>
</a>
.icon-cart is i and has no child.
So this is not valid:
.icon-cart a{
color: #4ca3c0;
}