I currently have a an icon tag and I am trying to style the :hover for the icon. It is from font-awesome library. My css is pretty straight forward.
i:hover {
background-color: white;
box-sizing: border-box;
}
When I hover over my icon, I would like only the icon itself to have the hover effect rather than the bounding-box around my icon. How can I accomplish this?
Try this
i{
color:yellow;
font-size:22px;
}
a:hover .fa-google{
color:red;
}
.fa-facebook-square:hover{
color:blue;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
If its inside an element
<br>
<i class="fa fa-google"></i> Hover Here
<br>
Without another element
<br>
<i class="fa fa-facebook-square"></i> Hover the Icon
Related
I just need to replace the following code to use the awesome font instead a background image. The goal is replace a button inside wordpress theme.
This is inside style.css
#et-social-icons .youtube .et-social-normal { background: url(images/YT.png) no-repeat 23px 23px; }
#et-social-icons .youtube .et-social-hover { background: url(images/YT-hover.png) no-repeat 23px 23px; }
#et-social-icons .youtube a:hover { background: #de2321; }
And here the part inside header.php to "show" the button:
<li class="youtube">
<a href="https://www.youtube.com/channel/UC3SNuSqLl09zS9IrxXswhIQ">
<span class="et-social-normal"><?php esc_html_e( 'Follow Us On YouTube', 'Nexus' ); ?></span>
<span class="et-social-hover"></span>
</a>
</li>
Thanks to all.
Andrea
You can use pseudo-elements in CSS, :before and :after, like so :
.element:before{
font-family: FontAwesome;
content: "\Unicode";
}
And then position it however you want. You can find the unicode value for each icon by clicking on it, in the "icons" section of the FA website.
I am trying to use stacked icons with fontawesome. I followed the example in Dave Gandy's excellent blog post.
http://blog.fontawesome.io/2014/05/19/stacking-text-and-icons/
Stacking works fine, but I am trying to align a stacked icon with a non-stacked icon (which is fa-5x). I cannot seem to make the size/alignment of a stacked icon match the size/alignment of a non-stacked icon.
See this codepen: http://codepen.io/rfiol/pen/YPQNaG
<i class="fa fa-calendar-o fa-5x"></i>
<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>
Try this
CSS
.calendar-text {
margin-top: .3em;
}
.calendar-text {
font-size:100%;
}
.col-md-1:nth-child(3) .calendar-text-half {
font-size:50%;
}
.col-md-1:nth-child(3) .fa-stack {
transform: scale(2,2);
}
.fa-stack {
font-size:2.5em;
}
.row {
width:100%;
height:100px;
display:block;
}
codepen http://codepen.io/anon/pen/jEwBNd
Why does the css :hover effect not work?
http://jsfiddle.net/t7on1k15/
body,html
{
font-family: courier;
height:100%;
min-width: 100%;
margin:0;
padding: 0;
}
#idDivBodyWrapper
{
margin:0;
padding:0;
height: 100%;
width: 100%;
background: lightgray;
}
#four:hover
{
color:black;
}
The HTML
<div id="idDivBodyWrapper" style="vertical-align:middle;">
<div style="position:absolute;display:block;float:left;left:0;Top:0"><button class="btn btn-default btn-lg" style="opacity:1;background:transparent;font-family:courier;font-weight:bold;" onclick="location.href='http://vqplan.com';"><i style="color:white;opacity:1;" class="fa fa-th fa-fw fa-5x"></i><br><span style="opacity:1;color:white">home</span></button></div>
<table style="width:100%;height:100%;background:black;clear:both;vertical-align:middle;text-align:center;"><tr><td>
<h1 id="four" style="font-size:10vh;color:white;">Code that lasts.<br><br><i id="one" class="fa fa-terminal fa-3x fa-fw" style="color:white;"></i></h1>
</td></tr></table>
</div><!--end idDivBodyWrapper-->
Here is one that does work:
http://jsfiddle.net/tuxdukz4/
CSS - CASCADING style sheets. You've got style="color:white" inside your h1#four element. That color:white is at a higher precedence level than your external style sheet rule, so color: white overrides the :hover style.
If you mod your fiddle and put color:purple into the h1's style= attribute, you'll get the exact same behavior: the hover won't work.
Because of CSS Specificity. I truly recommend you to read about it: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You have an element-level style color: white that overrides the hover effect.
Check this for a working one: http://jsfiddle.net/t7on1k15/1/
fiddle: http://jsfiddle.net/t7on1k15/2/
change the <h1 id="four" style="font-size:10vh;color:white;"> html to this:
<h1 id="four">Code that lasts.<br><br></h1>
and then add this css:
#four {
font-size:10vh;color:white;
}
your inline style has highest precedence over other css code.
I believe that putting the style inline ("style="font-size:10vh;color:white;") takes precedence over css. Inline style has higher priority. You actually couldn't style #four without hover in css if you use an inline style.
I couldn't find out how to add the pseudo :hover to the "Font-awesome" icons (fa-fa icons).
If somebody could help i would be greatly appreciative.
HTML:
<i class="fa fa-user fa-2x" style="margin-top:10px;"></i><br />
<i class="fa fa-level-up fa-2x" style="margin-top:10px;"></i>
CSS:
.overview, .tier {
color: black;
}
a:hover {
color: red;
}
The code you posted works, but it'll also color any text that contains. If you want to apply the color only when you hover the icon, put it on the class fa like you did with the a tag.
.fa:hover {
color: red
}
or if you want to specify it per icon:
.fa-level-up:hover {
color: blue;
}
For the clickable span I want the inside of the glyphicon to be white and not show the elements behind it. How do I do that?
<ul class="summary">
<li></li>
<li class="summary-pendingitem">
<input id="input-newrating-text" class="summary-pendingitem-text"
placeholder="rating's text"/>
<input id="input-newrating-color" class="summary-pendingitem-color"
placeholder="rating's color"/>
<span id="btn-addrating" class="glyphicon glyphicon-plus-sign"></span>
</li>
</ul>
.summary{
position: relative;
list-style-type: none;
max-width: 18em;
margin-top: 1em;
}
.summary li{
border: 1px solid gray;
}
.summary li input{
margin: .3125em;
width: 96%;
}
#btn-addrating{
position: absolute;
top: -0.313em;
right: -0.313em;
font-size: 2em;
color: #77dd77;
}
Generally speaking, you can't really modify any icon or glyph itself any more than you can slightly alter the presentation of the character 'R'. Icons are just glyphs or characters for a given font.
However, all elements can have both a both a color and background-color property. So, in this case, you can just add a background color to the glyphicon element, which will apply a white rectangular background. In this particular instance, if you'd like the background to 'hug' closer to the icon which happens to be a circle, you can apply a border-radius of 50% to turn the element into a circle. So you can accomplish like this:
.my-plus {
color: #006800;;
background: white;
border-radius: 50%;
}
Alternatively, you could compose icons by stacking two or more icons together.
You can stack icons natively in Font-Awesome or by adding a little CSS to Bootstrap's Glyphicons:
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x fa-inverse"></i>
</span>
Demo in jsFiddle