I am using the following code for making a button that looks like the glyphicon:
<button type="submit" class="btn btn-link">
<span class="glyphicon glyphicon-triangle-top" style="font-size: 20px;">
</span>
</button>
When I click on the button, a box appears around the glyphicon (following image) which is not desirable to me. How can I make this box invisible or even make it smaller?
For example in stackoverflow, such a box does not exist when you click on vote-up (which you can do right away on this post ;) )
Please help. Thanks in advance.
Set box-shadow and outline to none when focused.
.btn-link.btn:focus {
box-shadow: none;
outline: none;
}
Background color for a button is displayed faded in IE-9 and it works perfectly fine in other browser.
<div id="pt1:_d_reg:region1:1:pt1:r1:0:r4:0:pt1:subf1:cb1" class="x2cg xhq p_AFTextOnly" style="background-color:#00822e; border-color:#00972b; border-style:solid; border-width:1.0px; background-image:none; background-repeat:repeat;" _afrgrp="0">
<a onclick="this.focus();return false" class="xhp" href="#">
<span class="xhu">Search</span>
</a>
</div>
Above is the snippet from the html. How to make this work?
I was able to overcome this by using the below style attribute:
filter: none !important
Thanks a lot for your comments guys.
I have some buttons in an html template, controlled by an AngularJS directive. The buttons ng-click event doesn't fire when you click on the buttons contents (icon and span), clicking anywhere on the padding or blank space works fine though...
This is only an issue in Safari.
I am using AngualrJS 1.4.
The icon is in an i element using classes to find the icon I want from a font file.
<button ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
<i class="icon icon-awesome"></i>
<span>Awesome</span>
</button>
Clicking in the green or orange area works fine.
The image on the right, clicking on the element in blue, doesn't trigger the click.
I have tried messing with the z-index and I have looked to see if the icon and span elements are capturing the click and preventing it from being passed to the button (which as far as I can tell they are not...)
try with this:
<a href="javascript:void(0)" ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
<i class="icon icon-awesome"></i>
<span>Awesome</span>
</a>
I've managed to get it working using z-index.
The icon and the span needed to have the position set for the z-index to have any effect.
I added the following to my .scss file.
.awesome {
.icon {
position: relative;
z-index: 1;
}
span {
position: relative;
z-index: 1;
}
}
I'm not sure what was capturing the click event but this seems to have fixed it in my specific case.
For me the solution was to move the ng-click inside the <button> tag. I had it previously in <span> and it was working in Chrome, but not in Firefox and IE.
After the ng-click resides in <button> instead of <span> tags, it works in all three browsers with no errors.
Here is my resulting code:
<button class="btn btn-default btn-xs" ng-click="myFunction()">
<span class="glyphicon glyphicon-th-list">
</span></button>
Hope this helps.
I need to change the colour of one link.
I generally have no problem in managing the a colour, but in this case I do not know what to do.
This is how the link appears:
and this is the style that I see when I inspect the element within Safari or Chrome:
As you can see, the computed style defines the correct colour, but the link is still shown using blue. If I go to the 'Computed Style' tab and check 'Visited' the colour becomes correct. So the problem is the default link colour.
The html code follows:
<div id="top-header">
<table id="top-header-table">
<tr>
<td id="icon"><i class="fa fa-th fa-2x"></i></td>
<td id="headings"><h1>Page Title</h1><h2>Subtitle</h2></td>
<td id="controls">
<i class="fa fa-user-md"></i>Username<br/>
<i class="fa fa-power-off"></i> ESCI
</td>
</tr>
</table></div>
The CSS is:
table#top-header-table a {
color: WhiteSmoke !important;
text-decoration: none;
}
table#top-header-table a:visited {
color: WhiteSmoke !important;
text-decoration: none;
}
I made thousands of attempts. I cannot change its colour even if I add anid to the a element. I am only able to change its colour using an inline style.
Is there someone who can explain what the problem is?
No other link in my pages is shown using blue.
EDIT. I added !important as suggested but nothing changed.
It must be getting overwritten somewhere. Check out the "Computed" tab in your dev tools to find out. Usually it is because you have it defined on the top of the CSS file and something below it is snagging it. CSS files are interpreted from top to bottom.
So judging by your image this specific part is misbehaving ?
<i class="fa fa-power-off"></i> ESCI
the fa or fa-power-off class might be overruling your a styling.
set the appropriate styling for the a on the fa-power-off class.
I have to wrap my icon within an <a> tag for some reason.
Is there any possible way to change the color of a font-awesome icon to black?
or is it impossible as long as it wrapped within an <a> tag? Font awesome is supposed to be font not image, right?
<i class="icon-cog"></i> Edit profile
This worked for me:
.icon-cog {
color: black;
}
For versions of Font Awesome above 4.7.0, it looks this:
.fa-cog {
color: black;
}
HTML:
<i class="icon-cog blackiconcolor">
css :
.blackiconcolor {color:black;}
you can also add extra class to the button icon...
You can specify the color in the style attribute:
<i class="icon-cog" style="color:black"></i> Edit profile
Try this:
<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
To change the font awesome icons color for your entire project use this in your css
.fa {
color : red;
}
If you don't want to alter the CSS file, this is what works for me. In HTML, add style with color:
<i class="fa fa-cog" style="color:#fff;"></i>
Is there any possible way to change the color of a font-awesome icon to
black?
Yes, there is. See the snipped bellow
<!-- Assuming that you don't have, this needs to be in your HTML file (usually the header) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Here is what you need to use -->
Edit Profile
Font awesome is supposed to be font not image, right?
Yes, it is a font. Therefore, you are able to scale it to any size without losing quality.
To hit only cog-icons in that kind of button, you can give the button a class, and set the color for the icon only when inside the button.
HTML:
<a class="my-nice-button" href="/users/edit">
<i class="icon-cog"></i>
Edit profile
</a>
CSS:
.my-nice-button>i { color: black; }
This will make any icon that is a direct descendant of your button black.
With reference to #ClarkeyBoy answer, below code works fine, if using latest version of Font-Awesome icons or if you using fa classes
.fa.icon-white {
color: white;
}
And, then add icon-white to existing class
For me the only thing that worked is inline css + overriding
<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>
just give and text style whatever you want like :D
HTML:
<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
<span style="color:black;">Text Name</span>
</a>
.fa-search{
color:#fff;
}
you write that code in css and it would change the color to white or any color you want, you specify it
You can change the Font Awesome's icon color with the bootstrap class
use
text-color
example
text-white
Sometimes changing the colour in the external css file doesn't work. You can add inline css property in the icon tag and that will work.
For example
<i class="fa-solid fa-keyboard" style="color: grey;"></i>
just give it the style whatever you want like
style="color: white;font-size: 20px;"
You can change the color of a fontawesome icon by changing its foreground color using the css color property. The following are examples:
<i class="fa fa-cog" style="color:white">
This supports svgs also
<style>
.fa-cog{
color:white;
}
</style>
<style>
.parent svg, .parent i{
color:white
}
</style>
<div class="parent">
<i class="fa fa-cog" style="color:white">
</div>
Write this code in the same line, this change the icon color:
<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">
Use color property to change the color of your target element as follow :
.icon-cog { // selector of your element
color: black;
}
Or in the newest version of font-awesome , you can choose among filled or not filled icons
If you want to change the color of a specific icon, you can use something like this:
.fa-stop {
color:red;
}
It might a little bit tricky to change the color of font-awesome icons. The simpler method is to add your own class name inside the font-awesome defined classes like this:
.
And target your custom_defined__class_name in your CSS to change the color to whatever you like.
Open the svg file in vs code or something
change the line
path fill="gray" to what ever color you want! in my case i change it to gray!
I added a style, then color of your choice and make sure to make it bold
HTML:
<i class="icon-cog blackiconcolor">
css :
.blackiconcolor {color:black;}
Using class will give you a free binding property which you can apply on any tag you require.