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;
}
Related
I have a tooltip, and I want to change his background. The default background is black.
<ng-template #start>Start</ng-template>
<button [ngbTooltip]="start" type="button" class="btn btn-outline-danger">
<i class="fa fa-play" aria-hidden="true"></i>
</button>
Could you, please, help me with this?
There need to be couple of css changes,
Check stackblitz demo Here
You need to add below css to the root style file. Replace red with your desired color.
/* Add application styles & imports to this file! */
.tooltip-inner{
background-color: red!important;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before{
border-right-color:red!important;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before{
border-left-color:red!important;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before{
border-top-color:red!important;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before{
border-bottom-color:red!important;
}
In your HTML, add tool-tip-btn to your button’s class attribute, making it like this:
class="btn btn-outline-danger tool-tip-btn"
Then in your CSS, refer to that class:
.tool-tip-btn {
background-color: #ccc;
}
Its define in their OFFICIAL DOC Here
<button type="button" class="btn btn-outline-secondary" ngbTooltip="Nice class!"
tooltipClass="my-custom-class">
Tooltip with custom class
</button>
and in you TS
styles: [`
.my-custom-class .tooltip-inner {
background-color: darkgreen;
font-size: 125%;
}
.my-custom-class .arrow::before {
border-top-color: darkgreen;
}
`]
and the link for more info
You can write a class (e.x tool-info-class) and add on your tooltip
.tool-info-class .tooltip-inner {
background-color: #fff;
}
tooltipClass="tool-info-class"
An example https://stackblitz.com/edit/angular-yo7esv
Below has worked for me earlier
::ng-deep .tooltip-inner {
background-color:#707070!important
}
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
I would like to have font awesome with charaters on it , but it fails to do that.Please help to understand whats going on wrong.
Output :
Code Tried :
<i class="fa fa-square fa-2x" style="color:red;"><span style="text-color:white;">S</span></i>
<i class="fa fa-square fa-2x" style="color:yellow;"><span style="text-color:white;">XL</span></i>
<i class="fa fa-square fa-2x" style="color:green;"><span style="text-color:white;">XXL</span></i>
You shouldn't use Font Awesome, as this will only output icons using CSS content, and you can't put any HTML markup 'inside' them.
The best thing would just be to use span tags, and style them using CSS.
http://jsfiddle.net/7uevq7pu/
HTML:
<span class="red">XL</span>
<span class="yellow">S</span>
<span class="green">XXL</span>
CSS:
span { border-radius:5px;padding:0 5px;text-align:center; }
.red { background:red; }
.yellow {background:yellow; }
.green { background:green; }
You can also define content as icon:
http://jsfiddle.net/tagliala/77re29ct/24/
.fa-a:before {
font-family: Arial; /* your font family here! */
font-weight: bold;
content: 'A';
}
<span class="fa fa-a"></span><br/>
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
Is there is a simple way to stylize the Fontawesome icons background properly?
I was trying to do it with the icon-remove-sign (which has the particularity to be a circle) icon in order to make appear the cross in white and the circle in red.
The difficulty is that the icon is recognize as a square, so i was trying to make it a circle in order to apply the red background color (but i am wondering if there is not something simpler):
.icon-remove-sign {
padding: 0;
border-radius: 25px;
color: white;
background-color: red;
}
But it's not enough, we can see the red background at the top of the icon.
How would you do it ?
With fontawesome you can use stacked icons like this:
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
It feels a little hacky, but I managed to get it working here:
http://jsfiddle.net/3FvxA/
display:block and giving it a height and width seems to be the secret.
Assuming that your HTML looks like this:
<div class="social-circle">
<a class="fa fa-facebook" href="#"></a>
<a class="fa fa-twitter" href="#"></a>
<a class="fa fa-pinterest-p" href="#"></a>
</div>
You can do something like:
.social-circle [class*="fa fa-"] {
width: 25px;
height: 25px;
color: white;
background-color: grey;
border-radius: 25px;
display: inline-block;
line-height: 25px;
margin: auto 3px;
font-size: 15px;
text-align: center;
}
.fa-facebook:hover {
background-color: #3B5A9B;
}
.fa-twitter:hover {
background-color: #4FC6F8;
}
.fa-pinterest-p:hover {
background-color: #CA2128;
}
See the example here : http://jsfiddle.net/k69xj2n8/