Hi,
We understand that 3.8 version of nopCommerce supports font icons and have done exhaustive research on the forums to learn how to get them to show, including this link: https://www.nopcommerce.com/boards/t/25807/enhancement-font-awesome.aspx
Currently there is an ionicons style sheet out of the box, but we are unable to get them to show. We also tried to add font awesome icons and style them to show. We get a box symbol instead. We want to replace the word "search" in the search button with a magnifying glass icon and add font icons in various places without resorting to a png.
We have tried using ":before" with the class and then adding the font-family and content code.
We tried adding a span tag around the search button an then a span:before.
We made sure the fonts were added to the styles.
Also, we did try adding icons to the Category menu using the preexisting code below. Even adding the preexisting ionicons that come with nopCommerce still renders a box symbol, not the font icon.
.block .list a:before {
content: "";
position: absolute;
top: 16px;
left: -12px;
width: 5px;
height: 5px;
border-radius: 0%;
background-color: #e4a7af;
}
Can you please provide the missing information to us on how to get the font icons to display on the public store?
Thanks!
Font Icons
MVP
- 2128
- 19233
- 11/6/2009
- Malaysia
I used font-awesome in my theme as well, and they work prefectly. Let assume you've included and referenced the font toolkit correctly.
There are two ways you can do:
HTML way:
By including <i class="fa fa-your-icon-class"></i> before your category menu.
For example:
<div class="title">
<i class="fa fa-gift"></i>
<strong>@T("Categories")</strong>
</div>
CSS way, which is the approach you take:
Your problem is that you are missing the font and content info.
The correct css should be
.block .list a:before {
content: "\f06b";
position: absolute;
top: 16px;
left: -12px;
width: 20px;
height: 20px;
color: #000;
font: normal normal normal 20px/1 FontAwesome;
}
There are two ways you can do:
HTML way:
By including <i class="fa fa-your-icon-class"></i> before your category menu.
For example:
<div class="title">
<i class="fa fa-gift"></i>
<strong>@T("Categories")</strong>
</div>
CSS way, which is the approach you take:
Your problem is that you are missing the font and content info.
The correct css should be
.block .list a:before {
content: "\f06b";
position: absolute;
top: 16px;
left: -12px;
width: 20px;
height: 20px;
color: #000;
font: normal normal normal 20px/1 FontAwesome;
}