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.
Related
Fontawesome-angular can be used via the following tag:
<fa-icon [icon]="['fal', 'info-circle']"></fa-icon>
In some cases - like the primeng accordion - the default icon can be replaced by setting css classes.
Is there a way to access the fontaweome svg images by providing the names as classes without the fa-icon tag?
Something like this:
<i class="fal fa-info-circle"></i>
Demo add this to index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script>
I think there is a typo in the class name.. Try this..
<i class="fas fa-info-circle"></i>
Am trying to use a font awesome icon as a button to implement the like feature in my web application, using bootstrap 4 and font awesome
<button class="icon-button" onclick="actOnStory(event);"data-story-id="<%= story._id %>">
<i class="far fa-heart"></i>
</button>
my current code results in the icon being inside the button and not being the button itself
No need to wrap <i> with <button>, since onclick event can be called on icon as well. Just make it
<i class="far fa-heart" onclick="actOnStory(event);" data-story-id="<%= story._id %>"></i>
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!!:)
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.