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
Related
So, I am using Angular and started using FontAwsome. I want to put the text inline, not in 3 lines like in the image above.
The above text is "4 BANJA LUKA".
The other solution would be to make the margins between the lines smaller, so it can fit the icon without making the icon too large (for example 4x or 5x).
Does anybody know the solution?
<span class="fa-stack"> <i class="fas fa-comment-alt fa-3x" style="color:yellow;"></i> <i class="fa-stack-1x" style="font-size:10px;">4 BANJA LUKA</i> </span>
One Way
you are want below manner to add font awesome.
https://www.npmjs.com/package/#fortawesome/angular-fontawesome
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>
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 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 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. :)