Adding font-awesome icon in wordpress menu - css

I am new.I want to to know Font-aewsome Icon adding process in Wordpress menu.I have install font-awesome in my theme.Just want to know process how to add this in Dynamic menu?
Thanks

On the menu item, if you open the link, there will be CSS Classes. you can put css class of font-awesome.
For example type it in input box of css classes.
fa-user
It appears on the side of menu link

Related

Center logo with navbar and cart option wordpress

How can i design Center logo with nav menu In Wordpress.In Mobile view i need Search icon and Cart icon.and Static navbar needed. Some examples https://biona.co.uk/ http://palkova.in I tried different themes but now work.
I think this kind of nav style is not available in theme. You have use lots of themes to search for this type of navigation style or you have to build custom navigation.

Weird icons border in footer in Wordpress

I'm working on a web in Wordpress and I have some trouble with the footer. I have three widgets and in the middle one I want to put some social icons. I have tried with different plugins and the problem is the same: first icon shows great but next are showing a weird border and I have no idea how to modify.
Could someone pitch in?
Thank you!
It might be a css style issue. If the first icon looks right, maybe the styles only apply to the first because the icon html elements aren't having the same class or the css selector is wrong (something like icon-class:first-child).
I would check your Browser Dev Tools:
Check if the icon html elements are all having the same class.
If they do, maybe the icon file itself is just ugly. You can check the file in the dev tools by hovering the file URL. If that is the case, the plugin provider should updates the icons.
If the don't have the same css class, you should customize your css, maybe there is a way in the widget plugin.

how to make dropdown content with nav-tabs in bootstrap 3?

i'm using bootstrap nav-tabs(vertical pills). i want to make this - when i click on tab, the content of THIS tab drop downing exactly under this tab(not somewhere else) like this
Then the Bootstrap feature what you are looking for is called Accordion or Collapse and not Nav-Tabs.
Here is the link where its available in the bootstrap documentation. You do not need any extra plugin except ofcourse jquery.min.js', bootstrap.js and bootstrap.css to make this work.
Important Note : jquery.min.js should be loaded before bootstrap.js.
http://getbootstrap.com/javascript/#collapse
Here is the basic Accordion example with the required libraries.
Hope it helped :-)
I have found solution. if someone also have this problem, just check bootstrap accordion
accordion
thats it!
From the Bootstrap docs:
Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.
Using navs for tab panels requires JavaScript tabs plugin
For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.
Make navs used as navigation accessible
If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

Wordpress menu disappears when using a Twitter bootstrap plugin

The page in question is http://dev.gapsummit.com/?page_id=2
With no Bootstrap plugin enabled, you can see the menu items like so
With either of these BootStrap plugins enabled, the menu bar is hidden.
Easy Bootstrap shortcode
Wordpress Twitter Bootstrap CSS
The menu items are still present in the source file, they are just hidden. If anyone can help me unhide them (point out what css is hiding the element), I would be most grateful!
It is the class .dropdown-menu that bootstrap is picking up. Over-ride the rules for the menu with !important in your own css and your menu will appear.
.dropdown-menu{
display:block !important;
//other style rules with !important
}

How to edit custom menu widget CSS in Wordpress?

I want to create a horizontal custom menu in wordpress. I've added a custom menu widget to the footer of my site (not online yet) but it displays a vertical bullet list menu. Where can I change that?
I'm using latest wordpress and the Interio theme if that helps any.
I don't know how to edit CSS for custom menu widgets. How do I do this?
You can edit the CSS for any widget in your theme's style.css file. Using your development tool of choice (Chrome dev tools or Firebug), inspect the menu widget (the vertical bullet list menu) and see if you can identify any unique but consistent selectors for that menu. Those will be the selectors you'll use to target this menu and style to your liking.
Have fun!
I solved this problem by using this dropdown menu widget which can also be set to create horizontal menu's :)

Resources