I am having trouble deleting the outline of the button in CSS. I have to put the font awesome icon in button, so that it is accessible for screen . But I couldn't delete the outline of the button using outline:none or outline:0 in CSS.
<button class="fa fa-calculator" aria-label="calculator"></button>
I guess by outline you mean border?? Since both have different meaning in CSS it's easy to get confused.
Den use
<button class="fa fa-calculator" style="border:none">
Or use this
.Fa.fa-calculator{Border:none;}
& If you are specifically talking about outline den you ll have to share your CSS file mate!!:)
Related
I'm trying to add the styles sheet for font-awesome into a Codepen but seem to be getting nowhere, can anybody help please.
Codepen (https://codepen.io/kellett/pen/YreKaW)
Below is the styles sheet I've inserted in the top of HTML page.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
It's working, you just are using the wrong font-awesome class.
Line 19 should be <span class="fa fa-search"></span>.
See this updated CodePen
Note: You can also add CDNs in the CodePen settings so you don't have to include it inline in your html.
simply add this http://static.fontawesome.com/css/fontawesome-app.css in css setting panel:
you are using wrong . Check this
<span class="fa fa-search"></span> use like this instead of <span class="fa-search"></span>.
Go to Settings on the top right-hand corner. Then paste the CDN code in the box that says "Stuff for <head>." Press Save and Close before adding your Font Awesome tags, which should be formatted like this:
<i class="fa fa-thumbs-up"></i>
Here's the CodePen. You should see a thumbs up icon on the bottom of the page:
https://codepen.io/calumchilds/pen/boLwVb
Hope this helps!
Add this link into js setting:
https://use.fontawesome.com/4d74086fc6.js.
Open settings.
On the Pen Settings modal, select the CSS tab
In the "Add External Stylesheets/Pens" section, search for font-awesome.
I'm stucking on a little issue with awesome fonts icons. I've a wordpress website and I use awesome icons, in particular "battery" icons.
In 1st page I can see the battery icon, but in 2nd page I can't see battery icon, just white space, anyway in 2nd page I can see all icon types, except battery icon...
I can notice that in battery icon I don't see the code ::before in tags...
maybe this could be the issue... ?!
<i class="fa fa-battery-full"></i>
where I see the icon the code is:
<i class="fa fa-plug">::before</i>
Have you tried the last version of FA? try to change the version
Download Here
Maybe the FA that your used is old, Try that.
For collapse/expand icons curretnly I have this in my Razor code:
<span class="glyphicon glyphicon-minus"></span>
So it has the "+" and "-" icons that my JS uses to toggle between them.
Now I want to use Up and Down arrows, how can I use FontAweosme up and down arrows?
I think this would work:
<span><i class="fa fa-angle-up"></i></span>
<span><i class="fa fa-angle-down"></i></span>
To replace "Glyph Icons" with "FontAwesome"
Visit: https://fortawesome.github.io/Font-Awesome/get-started/ and follow instructions.
Icon-font replacement and custom font glyphs
If you're looking for in depth control over custom fonts and glyph-class-names, see these answers: How to create custom font icons?
I use css framework Materialize.css
I don't understand where past color in my HTML icon
<i class="large material-icons">note_add</i>
I have tried cyan darken-4
<i class="large material-icons cyan darken-4">note_add</i>
But nothing succeeded, I need exactly change color icon.
How to make it?
Add the class of "cyan-text" & "text-darken-4" to the .
<i class="large material-icons cyan-text text-darken-4">note_add</i>
You can do this by adding a class to your icon like below-
<i class="large material-icons icon-blue">note_add</i>
And then in your CSS stylesheet, you can define the color for the icon-blue class
i.icon-blue {
color: blue;
}
Your icon color will then be changed. Hope this helps!
It's easy, I'll show you an example:
<i class="material-icons large red-text">room</i>
Just enter the name before the text (red-text)
I got an example with using the "style" attribute.
<pre></td><td class="col-sm-2"><i class="little material-icons" style="color:blue">search</i></pre>
According to Materialize documentation you can access their direct css attributes.
.input-field input[type=text]:focus + label or similar
Class or ID modifier
Using materialize's color palette
Hey you asking that you want to change icon colour in Materialize CSS.
Same was my Question But i have Find the ans....that
<i class="material-icons red-text" >home</i>
This Code will change the icon Color and if we want to give its background color just change it in custom.css
.class {background-color:red;}
If you want to use Jquery
This will change color of all the material icons
$(".material-icons").css("color", themeColor);
This will change color of the material icons inside an element eg input field
$(".input-field>.material-icons").css("color", themeColor);
Live Demo
See the Pen Materialize CSS Change Theme Color by Hitesh Sahu (#hiteshsahu) on CodePen.
I'm wondering about screen reader accessibility using Twitter Bootstrap framework and FontAwesome icon fonts.
I'm looking at 2 different icon situations:
1) The icon has helper text that a screen reader will pick up:
<span class="fa fa-pencil"></span> Edit
2) And a standalone icon without any helper text:
<span class="fa fa-pencil"></span>
Ideally, in both situations, a screen reader will announce that the element is an "Edit" button.
Per FontAwesome's site:
Font Awesome won't trip up screen readers, unlike other icon fonts.
I don't see any speech css tags related to FontAwesome or Bootstrap and not really clear to me how a screen reader will react to each of these situations.
I'm also aware of aria-hidden and Bootstrap's .sr-only and there has to be an ideal way to handle both situations.
Edit: added title="Edit to example 2.
What advantage does using aria-label="Edit" have over the standard title="Edit"?
Edit 2: I came across this article that explains pros and cons of different use implementations.
First of all, you should probably use <button> instead of <a href="#">. Empty links can be confusing for screen readers, but a button is a button. In short, links take you places, buttons perform actions. (http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/; https://ux.stackexchange.com/questions/5493/what-are-the-differences-between-buttons-and-links).
I would go with a variation of your first code sample, and utilize Bootstraps .sr-only class. If we update your code with button and add in the class, we have:
<button type="button" class="btn btn-default"><span class="fa fa-pencil"></span> <span class="sr-only">Edit</span></button>
We now have a more semantically correct button element; sighted users see the edit pencil icon; and screen reader users will hear "Edit". Everyone wins.
(Note, the button code is straight from Bootstraps CSS Buttons section.)
From my understanding I think it may be useful to also add in:
aria-hidden="true"
to the span class that holds the pencil icon. This will prevent the screen reader from trying to read this element.
<span class="fa fa-pencil" aria-hidden="true"></span>