Font Awesome Menus
| 开发者 | New Nine |
|---|---|
| 更新时间 | 2013年12月5日 04:14 |
| PHP版本: | 3.0 及以上 |
| WordPress版本: | 3.5.1 |
| 版权: | GPLv2 |
| 版权网址: | 版权信息 |
详情介绍:
icon-home
as a class in your menu and the icon will be inserted before the text.
In your posts/pages
Want that home icon to show up in a post or page or custom post type? Use the shortcode:
[icon name=icon-home]
and voila!
In your theme
Because Font Awesome is available throughout your site, use it in other parts of your theme too! Want that home icon hardcoded into your footer? Here you go:
<i class="icon-home"></i>
It's all there, baby
You can also use any and all of the code options and styles on the Font Awesome website. See more examples at http://fontawesome.io/examples/
安装:
font-awesome-menus into the /wp-content/plugins/ directory.
Then, activate the plugin through the 'Plugins' menu in WordPress.
To add icons to your menus, simply add the icon name (eg, icon-home) as a CSS Class on your menu item. Use the shortcodes in posts and pages, or use the icon class anywhere on your site!常见问题:
Will this plugin be updated?
NO!!!! Go to the new Font Awesome 4 Menus for WordPress for the latest version.
Why didn't you just update this plugin rather than issue a new one?
Font Awesome changed its code from using icon-(whatever) to fa-(whatever). If we automatically updated this plugin with the new code, all of the sites using the old one would break. And that's just rude.
How to I add an icon to my menu?
Go to Appearance -> Menus, select which menu item to which you want to add the icon, and add the icon class under 'CSS Classes (optional)'. (eg, to add the home icon to your 'Home' link, enter "icon-home" (without quotes) as a class.) Save your menu and voila!
Why don't I see an option to add classes?
Under Appearance -> Menus, click 'Screen Options' (top right of screen) and make sure that 'CSS Classes' is checked. If not - check it!
Can I hide the text and just show the icons for my menu?
Yes. Font Awesome menus adds a space between the icon and the text, and wraps that portion in a span with a class of "fontawesome-text". To hide the text and just show the icon, you can put .fontawesome-text {display: none;} in your stylesheet.
You can see this in action at our responsive site (http://www.newnine.com) where the mobile and smaller tablet versions only show the icons, but the text then appears on larger displays.
Will this bloat or slow down my WordPress?
No. The plugin only makes one option entry in your database which means it won't bloat your installation. On your site, Font Awesome will load two stylesheets - the minified CSS (19kb) and the minified CSS for IE7 (30kb, in a conditional statement) - and the fonts. We use it on mobile-first responsive sites (and our own site) all the time without any noticeable performance drag.
What happens to my menus if I deactivate/uninstall this?
Your site will be fine. Where you used Font Awesome menus, those menu items will just have an additional class (icon-whatever) that you can erase or ignore (or style differently). Only one setting is saved in your database, and that is removed if you uninstall the plugin. No bloat here!