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.
Related
I am simply tyring to change the color of the a fa-square from fontAwseome dynamically using angular and NG-Style. Here is how:
<p><i class="fa fa-square blue" ng-style="{'color': portfolio_risk.values.data.datasets[0].backgroundColor[0]}"></i> {{portfolio_risk.values.data.labels[0]}} </p>
The style seems to just not be applied, cause in the browse when i inspect the element color is still set by the class 'blue', I have also tried to get rid of this class but nothing changes.
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 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!!:)
I got this tiny code:
<i class="icon-plus-sign">Hello</i>
I can't set the font-awesome icon on the right. I tried to change the float, padding, margin, but all to no avail.
In other words, here's what I have:
Here's what I want:
FIDDLE: http://jsfiddle.net/UF9A3/
Don't wrap your text inside the icon markup. Use:
Hello <i class="icon-plus-sign"></i>
or
<i class="icon-plus-sign"></i> Hello
You can also change the position of the icon:
background:(url(../img/dash.png) 0 right no-repeat);
use this
<i class="icon-plus-sign"></i> hello
another u can use this
<i class="icon-plus-sign">Hello</i>
change the position in css
I am trying to use an icon-stack inside of a link. When I just use a single icon, everything works as normal. But when trying to use a stacked icon, it doesn't appear in the link like a single icon would.
The first method I am using is:
<span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis
Seen: Broken Stacked Icon
That gives me something where the two icons are both left-aligned (off center) and the icons appear over top of the text.
I had thought that including the span with the icon-stack class in place of a single <i> would be the way to do it, but it's not. This works fine:
<i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis
Seen: Inline icons
I am not sure where to put the container <span>, or if there needs to be more styles added to it. I've tried various combinations. Setting the a to display:block doesn't help (there are no other styles applied to the link).
When there is no text in the link, the result is the same. Setting the .icon-stack container class to display:block does help it work, but it's not perfect since the base icon is so much bigger than the icon on top.
It this something that is possible? Or am I pushing the limits of how stacked icons should be used?
Here you go..
<a href="http://google.com">
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
link text
<br/>
</a>
Span set to inline-block to ensure that the icon stays in place
body {
color:#00000;
}
a {
text-decoration:none;
color:inherit;
display:block;
}
span.icon-stack {
display:inline-block;
}
Demo: http://jsfiddle.net/aB4nU/1/
This is fixed in 3.2.1-wip branch. Or you can wait for the release tomorrow. :)