I have a WordPress site and I'm trying to get fa-fa icons to display next to the menu items.
It used to work but now it's just showing a blank box. Any ideas. Tried
fa fa-envelope
for 'post an ad'
Nothing.
<li id="menu-item-1499" class="Fa fa-envelope menu-item
menu-item-type-post_type menu-item-object-page menu-
item-1499"><a title="Post an Ad"
href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-place-ad/">Post an Ad</a></li>
<li id="menu
You might want to try fa instead of Fa? Class names are case-sensitive.
Related
From time to time after page refresh fontawesome icons get this rendered this way:
When they should look like this:
Is there anything I am missing my html or CSS?
This is the HTML to display each of those menu options is as simple as:
<li class=""><a ui-sref="Resources" title="Resources">
<i class="fa fa-lg fa-fw fa-globe"></i>
<span class="menu-item-parent ng-binding">Resources</span>
<b class="collapse-sign"><em class="fa fa-plus-square-o"></em></b></a>
</li>
The parent elements for the menu are:
<aside id="left-panel"><nav nav-menu="" stopwatch="true">
<ul><li><!--menu time --></li>
It seems something like mojibake. It could depend on the files (css and html) or document encoding. The file one should be utf-8 without bom.
I have use the Yeoman angular-fullstack generator and absolutely love it!
I'm trying to add a dropdown in the navbar.
I found the navbar controller in Client/Components/Navbar/navbar.controller.js and added items to the menu object. This works fine for individual pages, however I cannot find any syntax on how to add a dropdown menu!
I'm sure this is an easy question to answer but I am struggling to find any relevant documentation.
Cheers
Angular fullstack uses bootstrap. So you can use a bootstrap 3 drop-down menu where you would like your menu to be in the file that you found. If you go to http://getbootstrap.com/components/#dropdowns it's explained there.
angularfulstack may use bootstrap 3, however, for dropdown you need to use ui-bootstrap way of doing things.
<li ng-show="$ctrl.isLoggedIn()" class="btn-group" uib-dropdown is-open="status.isopen">
<a>
<span id="single-button" type="button" uib-dropdown-toggle ng-disabled="disabled">
<span class="glyphicon glyphicon-cog"></span>
</span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li ng-show="$ctrl.isAdmin()" ui-sref-active="active"><a ui-sref="users"><span class="fa fa-address-card-o"></span> Users</a></li>
<li ng-show="$ctrl.isAdmin()" ui-sref-active="active"><a ui-sref="dashboard"><span class="fa fa-dashboard"></span> Dashboard</a></li>
<li ng-show="$ctrl.isAdmin()" class="divider"></li>
<li ng-show="$ctrl.isLoggedIn()" role="menuitem" ui-sref-active="active"><a ui-sref="company"><span class="fa fa-gears"></span> Company Information</a></li>
</ul>
</li>
Problem
I am using wordpress and fontawesome icon library to add icon to each list item. I have added class to each list item by enabling "CSS Classes" from "Show advanced menu properties" from Screen option. I tried wp_nav_menu and various other tricks but failed to output class like fa fa-home
Code
<ul id="primary-menu">
<li><i class="fa fa-home"></i>home</li>
<li><i class="fa fa-user"></i>About</li>
<li><i class="fa fa-camera"></i>Gallery</li>
<li><i class="fa fa-gift"></i>Shop</li>
<li><i class="fa fa-bullhorn"></i>Blog</li>
<li><i class="fa fa-envelope"></i>contact
</ul><!-- #primary-menu -->
I want to output those classes individually to each "i" element in list item. Please, suggest any code snippets or walk-through.
This code (from your question) is not standard WP code - yours is including <i> elements:
<ul id="primary-menu">
<li><i class="fa fa-home"></i>home</li>
</ul>
WP outputs menus like so, without the <i> element:
<ul class="menu">
<li id="menu-item-8" class="fa fa-home menu-item menu-item-type-post_type menu-item-object-page menu-sample-page">
Sample Page
</li>
</ul>
Notice the class fa fa-home on the <li> element above? That was added by adding the class (just like you described). Additionally, it created the icon desired in the menu.
If you aren't getting the icon, ensure that font awesome is actually being loaded, and that the font files are installed and in the right directory relative to the font awesome stylesheet.
How are you adding the <i> elements? The only way you could achieve this (using the technique you are trying to use) would be to Write a custom menu walker, but that's a lot of work to add the icons, since you an add them simply by editing the class via the Menu dashboard.
I have made this website: http://manojpandey.tk/ implementing Bootstrap v.3
In the Contact section, I have added some social buttons.
<ul class="list-inline banner-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span>
</li>
</ul>
They are showing some abnormal behaviour that I don't get. When someone clicks on the button directly, a blank webpage with same url opens. Opening in new tab does good.
But, why does the former does not work. Any help will be appreciated.
<a class="btn btn-default btn-lg" href="http://twitter.com/manojpandey96" target="_top"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
Works for me. So just add:
target="_top"
to the a-Tags.
Is there a reason why you are using frames?
Edit:
The Frames are causing the problem. Without adding target, the link usually will open within the frame. But if you add target="_top", then it will be loaded in the full window, ignoring the frames.
More detailed explanation here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
I've got a view that has the following code:
<ul class="nav nav-tabs">
<li class="active"><i class="icon-home"></i> General</li>
<li><i class="icon-picture"></i> Background</li>
<li><i class="icon-edit"></i> Form Container</li>
<li><i class="icon-picture"></i> Logo</li>
<li><i class="icon-tint"></i> Colors</li>
<li><i class="icon-font"></i> Fonts</li>
</ul>
The classes and html attributes are from Twitter Bootstrap but that's not important.
After pressing Ctrl+E+D combination the following code gets changed:
<i class="icon-home"></i> General to <i class="icon-home"></i>General
I also tried putting an empty space between the <i> tags but it gets stripped out as well.
This is effectively moving the tab title closer to the icon and although it's easy to fix I don't want to have to do it every time I benefit from auto code formatting in Visual Studio.
Is there any way to change/tweak this behaviour?
You can play with things here :: Tools/Options/Text Editor/HTML/Formatting
You'll find it a little arduous at times to get things exactly the way you want them, but if there's a way to adjust your spacing, that would be where it is located.