I am trying to show fa icons with name of category in woocommerce wordpress products. I have figured it out to display them on a separate page but while showing them in the mega menu (Tweezers By Category), I am facing the problem that the FA icons are showing in the new line rather than showing before the name. You can check the live link here.
Please check if anyone can help me here.
You should add the icon inside each <li> element, example:
<li style="float:left;">
<a href="http://newsite.cealinetweezers.com/tweezers/tweezers-by-category/aquarium-aquascaping-tweezers/">
<i class="fa fa-dropbox"></i>
Aquarium & Aquascaping Tweezers
</a>
</li>
Wrapping the icon with a span and float left outside the li it's not the way to go.
So the span tag is doing the trick here.
<li style="float:left;">
<i class="fa fa-dropbox"></i> Aquarium & Aquascaping Tweezers</li>
Related
I am using a WordPress theme that I am trying to make 100% accessible. I cant get any help from the developer and I am not very good at the back end of WordPress. I need help with this:
[ 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are. ]
a (anchor) element must contain text. The text may occur in the anchor text or in the title attribute of the anchor or in the Alt text of an image used within the anchor.
This is the code in the theme:
<div class="qodef-mobile-menu-opener">
<a href="javascript:void(0)">
<span class="qodef-mobile-opener-icon-holder">
<i class="qodef-icon-font-awesome fa fa-bars " ></i> </span>
</a>
</div>
Where in WordPress is this code located so I can insert a title attribute or Alt text.
Thank You!
I tried to show shopping cart icon always in right side for mobile,tab,desktop using boostrap but it is not working for responsive.How can i show shopping cart icon always right side.
<div class="shopingicons mr-auto">
<a href="cart.html" class="icons-btn d-inline-block bag">
<span class="icon-shopping-bag"></span>
<span class="number">2</span>
</a>
</div>
Demo:https://jsfiddle.net/nvk87are/9/
Add your following code after </ul> tag in the navbar code. I tried it in your code and it worked.
<div style="float:right">
<div class="shopingicons mr-auto">
<a href="cart.html" class="icons-btn d-inline-block bag">
<span class="icon-shopping-bag"></span>
<span class="number">2</span>
</a>
</div>
</div>
Want more help? Reply and ask again
Your navbarResponsive is hidden in responsive mode and in larger view it's showing up and taking the place of your cart icons.
You can swap the position of your #navbarResponsive and the .shoppingicons. screenshot
Here you can check the working-demo
This markup is able to be read by JAWS arrow navigation in IE11, however in Microsoft Edge it only allows it to be fully read via tab navigation. Does anyone have any idea why Edge refuses to read this list item? We have other list items that are similar to this that are read just fine, but this one in particular doesn't seem to be available to be read via JAWS arrow navigation.
<li id="some-id">
<a href="/destination">
<span class="submenu"></span>
<span class="label"> Destination </span>
<span class="count">
<span class="value" data-info=0></span>
</span>
</a>
</li>
I've tried setting data-info=0 with and without quotes. I'm stumped.
I'm using font-awesome in my Django project, as icons in front of nav-bar list. My problem is, as the title says, some icons show up normally, some icons show square with 4-digit unicode inside, and some icons show up but mismatch the code. What a mess!
I've been stuck here for long, and i tried a lot to solve it. Read the docs through, and googled a lot, but no effective solutions found.
Environment information:
I'm using the latest version of Font-awesome(4.6.3) local copy on linux server(Ubuntu 14.04).
I've tried to load this page on Chrome/Firefox/IE, the results are no different.
I've tried to disabled the AdBlock plugin, resulted in vain.
Specific code:
The 1st icon is normal.
The 2nd icon only show square with unicode (the same with official).
The 3rd one show a mismatch icon.
<li class="openstack-panel">
<a class="openstack-spin" tabindex="6">
<i class="fa fa-home fa-fw"></i>
Security Group
</a>
</li>
<li class="openstack-panel">
<a class="openstack-spin" tabindex="7">
<i class="fa fa-key fa-fw"></i>
Key Pairs
</a>
</li>
<li class="openstack-panel">
<a class="openstack-spin" tabindex="8">
<i class="fa fa-git fa-fw"></i>
Floating IP
</a>
</li>
Here is how icons are displayed on browser:
Could anyone help me out?
Use the following link for Font Awesome and try,
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
or
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css
I have created a wizard using bootstrap and some custom styling
fiddle here
All I want to do now is add a couple of dashes (-) between the tabs
[One]----[2]----[3]
Can someone please help me out here.
Thanks,
Add them after your <a> tag
Like this:
<li class="active"><span id="t1" class="textColor">1</span>-----------
</li>
<li><span class="textColor">2</span>-------
</li>
<li><span class="textColor">3</span>----