I'd like to add a fontawesome icon to a shortcodes ultimate tab title.
When I try to do it inline
<i class="fa fa-500px"></i>
nothing comes up. Is it possible, either using CSS or some other means?
[font-awesome-icon] Tab text 1
[font-awesome-icon] Tab text 2
[font-awesome-icon] Tab text 3
For using shortcodes, there is a plugin which fetches the latest font awesome icons:
https://wordpress.org/plugins/better-font-awesome/
It works like this:
[icon name="fa-flag" class="fa-2x fa-spin fa-border"]
They have also alternatives syntaxes for previous versions (with the icon- class names).
Related
I upgraded from Fontawesome 3 to Fontawesome 5.
Now I got several problems. If I am just linking the font-awesome.min.css in the head, the icons are not loading. I just see squares.
If I link the all.css and tha all.js in the head, I works. So the icons are shown correctly. But everytime, I am clicking any Button and the page is realoding, it takes around half a second to reload the icons. In the previous Version it worked without the js and the icons weren't reloading at all.
I am not sure why it is behaving like this. Maybe because all the <i ...> are converted into svg?
Do you have any hints what I can do?
The class names changed.
In FontAwesome 3:
<i class="icon-thumbs-up"></i>
In FontAwesome 5:
<i class="fas fa-thumbs-up"></i>
You should look them up here and change them manually.
I'm using Material Design Lite tabs (as with the template shown at https://getmdl.io/templates/text-only/index.html). I would like the links to have an icon as with the Github and download link on the MDL site itself: https://getmdl.io
However, on the MDL site they are actually using a navigation bar, so I'm at the moment unsuccessful to repeat this look with the tabs.
The answer is actually quite simple, although the alignment of the icon and the following text seems to be off a bit (icons is a bit too high). You just add a span with the correct classes:
<a href="#download" class="mdl-layout__tab">
<span class="icon material-icons">get_app</span>
<span>Download</span>
</a>
I use glyphicon icons in my project, I use bootstrap 3.0.0 .
I have problem to display glyphicon-option-vertical icon, it just not displaed!
Here how I use it:
<span class="glyphicon glyphicon-option-vertical"></span>
While all other icons displayed fine.Any idea why this specific icon is not displayed?
Probably it's not declared in your Bootstrap CSS file. You might need to download the latest bootstrap from GitHub. Here you can find the fonts files
https://github.com/twbs/bootstrap/tree/master/fonts
I'm stucking on a little issue with awesome fonts icons. I've a wordpress website and I use awesome icons, in particular "battery" icons.
In 1st page I can see the battery icon, but in 2nd page I can't see battery icon, just white space, anyway in 2nd page I can see all icon types, except battery icon...
I can notice that in battery icon I don't see the code ::before in tags...
maybe this could be the issue... ?!
<i class="fa fa-battery-full"></i>
where I see the icon the code is:
<i class="fa fa-plug">::before</i>
Have you tried the last version of FA? try to change the version
Download Here
Maybe the FA that your used is old, Try that.
For some reason the font-awesome social media icons refuse to show up on any browser. All other icons seem to work perfectly fine though... I've included a photo of the page opened in Mozilla with inspect element(linked due to no reputation). The only loaded css files are bootstrap and awesome-font.
It looks like you thought the text description of stacks was the class names. Icon stacks should look like this, there is no on class:
<span class="icon-stack">
<i class="icon-minus icon-stack-base"></i>
<i class="icon-camera icon-light"></i>
</span>
In your example, the second class overwrites the first class. This is because your using both classes on the same element, instead of stacking them.