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>
Related
Its a pretty simple scenario but i can't find an in-framework solution.
I have a link with text and an icon. On hover of the link the icon should get another color than the linktext.
<a href="#" class="block text-black hover:text-red"><i class="fa fa-icon text-grey hover:text-blue"></i>
The icon hover only triggers when the mouse is over it not the link as a whole.
I know i can still write custom classes in tailwind but this is such a basic problem that I hope someone knows a better solution.
Add group class to link and use group-hover: on the icon.
<script src="https://cdn.tailwindcss.com"></script>
<a href="#" class="block p-6 border group text-black hover:text-red">
<span class="text-grey group-hover:text-blue-500">icon</span>
</a>
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?
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>
If I want to minimize icon size, how can I make icon small when using bootstrap?
This is demo http://jsfiddle.net/AqUBu/
I'd like to minimize the size of this human icon.
<span class='badge badge-success'><i class='icon-user icon-white'></i><i class='icon-user icon-white'></i><i class='icon-user icon-white'></i></span>
If you are using Bootstrap 3, you can use the <small> tag, like this: <small><span class="glyphicon glyphicon-send"></span></small>
It works perfectly with Bootstrap 3.
Glyphicons and other icons can be re-sized precisely with the CSS property font-size:
You know... being glyphs and all.
You can use class="btn btn-xs"
Reference: https://getbootstrap.com/components/
From http://getbootstrap.com/css/#small-text
Small text
For de-emphasizing inline or blocks of text, use the
<small> tag to set text at 85% the size of the parent. Heading
elements receive their own font-size for nested <small> elements.
You may alternatively use an inline element with .small in place of
any <small>.
Try:
<span class='badge badge-success small'>
<i class='icon-user icon-white'></i>
<i class='icon-user icon-white'></i>
<i class='icon-user icon-white'></i>
</span>
None of the above worked for me, I am using a combination of Bootstrap 4 and FontAwesome icons. I discovered Bootstrap 4 has it's own class to make smaller buttons:
<button class="btn btn-sm btn-secondary ">
<i class="fa fa-pencil"></i>
</button>
Bootstrap 4 button documentation (#Sizes)
If you want to make a button any smaller than this you will probably have to make some custom css, as simply changing the icon's size will no longer modify the size of the wrapping button.