Im looking for a good font awesome icon I could use as a "Reset" button for my application.
Im currently using fa-undo which looks like this:
The problem is that I need it to have a circle around it as the other buttons in my system do ( these are standard in font awesome icons, nothing has been modified except the color )
An example of what i need (with the undo image):
Ive been reading through the list here for nearly an hour but cant think of a possible alternative. Any thoughts?
FA has some utility classes, one of which is fa-stack. You can stack fa-circle underneath fa-undo.
.fa-circle {
color: #008db8;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-undo fa-stack-1x fa-inverse"></i>
</span>
Related
I'm trying to make these social media icons larger in my Wordpress menu.
I used this code as a custom link in the menu:
<i class="fa fa-instagram"></i>
fa stands for FontAwesome, so your icons are a font. You can change their size by using font-size in your CSS.
just add font size to parent HTML tag. It'll works.
a { font-size: 100px; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-instagram"></i>
I am designing a website when suddenly my icons resized at a small scale.
I am using font awesome for my ICONS when suddenly the font awesome icon turns into small when the size is equal to the EVENTS name below
My code is
<font size="6"><strong><i class="fa fa-newspaper-o" aria-hidden="true"></i> EVENTS</font></strong>
It must be like this
Can you help me guys? Thanks for future answers
Definitely do not use <font>. That is a really archaic tag that shouldn't be used any longer. Instead, you'll want to use CSS. Something like:
i.fa {
font-size: 1.5em; // However big you want it to be
}
As other users said - don't use <font> tag, but set the font-size with CSS.
However your code should work as you excpect. See snippet below:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<strong><font size="6"><strong><i class="fa fa-newspaper-o" aria-hidden="true"></i> EVENTS</font></strong>
<hr>
<strong><font size="15"><strong><i class="fa fa-newspaper-o" aria-hidden="true"></i> EVENTS</font></strong>
<hr>
<strong><font size="25"><strong><i class="fa fa-newspaper-o" aria-hidden="true"></i> EVENTS</font></strong>
Is there a way to overlap two Font Awesome icons in such a way that it looks like the files icon with respect to the file icon? I don't want to stack the icons but rather have one cover like 50% of another. Thanks!
Why not just use CSS padding to offset one of the icons?
<span class="fa-stack fa-lg">
<i class="fa fa-file fa-stack-2x"></i>
<i class="fa fa-file fa-stack-2x" style="padding-left:15px;padding-top:15px;"></i>
</span>
Fiddle: http://jsfiddle.net/mwatz122/sx7fk582/
I've been Googling around and can't seem to find any info on this.
In short, if I inline the colors for my Font Awesome icons, the colors change. If I put the same style selectors in my external stylesheet, no color change.
Here's the html:
<i class="fa fa-3x fa-facebook-official facebook-color"></i>
<i class="fa fa-3x fa-twitter-square twitter-color"></i>
<i class="fa fa-3x fa-linkedin-square linkedin-color"></i>
<i class="fa fa-3x fa-pinterest-square pinterest-color"></i>
<i class="fa fa-3x fa-envelope-square email-color"></i>
If I inline the color styles they change:
<style type="text/css">
.facebook-color {color:#3b5998}
.twitter-color {color:#55acee}
.linkedin-color {color:#0077b5}
.pinterest-color {color:#bd081c}
.email-color {color:black}
</style>
But if I put the exact same styles in my external stylesheet, there is no color change.
One note:
I grab Font Awesome with the CDN, maxcdn.bootstrapcdn.com
My sites at www.example.com and my static files like css and js are served from static.example.com. Is there some sort of cross domain issue that would cause the stylesheet not to work but explain why the inline works?
I am just pasted Font Awesome into the head of my WP themes header.php
And I know the fonts are working, but in the HTML I think I have made a mistake and I just cannot see what!!
http://goo.gl/Yoit33 - there is row of rounded boxes, 2nd row down, second in from the right.
any help I would be most grateful.
You need to remove the classes .fa and .fa-wheelchair from the a tag as the icon is actually being loaded in through the i tag.
From this:
<a href="http://www.synaxishosting.co.uk/test/mob/vat-exemption/" class="fa fa-wheelchair icon-5x btn rounded">
<i class="fa fa-wheelchair"></i>
</a>
To This:
<a href="http://www.synaxishosting.co.uk/test/mob/vat-exemption/" class="icon-5x btn rounded">
<i class="fa fa-wheelchair"></i>
</a>