Hi Vince,

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> is in the header.php page.

The product long description has the following ...

<ecttab title="#xf03d; Test"> -- shows a blank square icon.
<ecttab title='#xf03d;' "Test"> -- shows no icon.
<ecttab title=<i class="fa fa-video-camera"></i>> -- shows fa fa-video-camera and > in the content paragraph.

The icon does show in the content paragraph.

The menus do show the icons OK.

Thanks.

Glenn

Try this with the Ampersand symbol:

This would be in your vsadmin/includes file.

$ecttabsspecials='<ecttab title="&#xf03d; Video" special="video">';

Hi there,

Thanks for the info, I tried that in both includes.php files but it shows a square or blank icon with 'Video'.

Glenn

Try doing a HARD refresh on the page.

Ctrl + F5

Hi Glenn
Have you got a link to your test page?

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

You can see the product tabs here ...

https://www.threedogbakery.biz/celebration_cake__carob.php

Glenn

Hi Glen, can check that you are using the correct syntax for the tab setup this works on your site when testing in the browser <i class="fa fa-video-camera"></i>

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

Hi Sinbad,

Are you seeing a video camera icon on the 2nd product tab from the left? All I see is 'fa fa-video-camera' on the tab, the cache is cleared, Chrome and Edge.

Not sure I'm using the correct syntax now for the tab to include the icon, this is what I am using or various variations of it:
<ecttab title=<i class="fa fa-video-camera"></i>>.

Thanks.

Glenn

Hi Glenn
Maybe if you send me your site FTP login to my email (vince AT ecommercetemplates DOT com) and I can check what is up.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Hi Glen
I believe I have a possible answer. I haven't tried this on your site as I don't want to go changing your pages but working on a copy of your page here I added to the head...

<style>
li.TabbedPanelsTab{
font-family: FontAwesome
}
</style>

And now we see the font awesome glyphs. It will change the font for the text in the tabs to the FA font too, but if that is ok this should get things working.

Vince


Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

This is what I have in my SpryTabbedPanel.css file and it works great:

/* General tab parameters */
.TabbedPanelsTab{
position:relative;
top:1px;
float:left;
padding:10px 28px;
margin:0px 4px 0px 0px;
background-color:#dcdcdc;
list-style:none;
border-left:solid 2px #ccc;
border-bottom:solid 1px #ccc;
border-top:solid 2px #ccc;
border-right:solid 2px #ccc;
-moz-user-select:none;
-khtml-user-select:none;
cursor:pointer;
color:#000;
font:16px FontAwesome,Lucinda Sans Unicode, Arial, Helvetica, sans-serif;
font-weight: bold;
border-radius:5px 5px 0px 0px;
}

@media all and (max-width:796px){
.TabbedPanelsTab{
padding:4px 10px;
font:16px FontAwesome, Lucinda Sans Unicode, Arial, Helvetica, sans-serif;

}
}

@media all and (max-width:596px){
.TabbedPanelsTab{
padding:4px 5px;
font:11px FontAwesome, Arial, Helvetica, sans-serif;
}
}

Hi Vince,

Aah I see, that worked OK. Just need to change the actual text font.

Thanks.

Glenn

Hi midvalleydrifter001,

Thanks for the info, I will try that and see how it works in my situation.

Thanks.

Glenn

Hi midvalleydrifter001,

That worked too! Thanks.

---

Learn something new every day.

Thanks again folks.

Glenn

Hi Vince,

Sincere apologies for such a slow reply. (Been a bit busy!)

I changed the d/b collation to utf8_general_ci and that allows the writes back to the d/b OK, thanks, but if I have Froala enabled it does still convert the & #xf00a; to the Unicode value including if I comment-out the following line

<script type="text/javascript" src="froala/js/plugins/entities.min.js"></script>

That is all as you thought.

It's kind of workable, but I'd prefer to avoid the binary characters being substituted by Froala.

To keep it simple for now, I've turned off Froala again and I tried using the FA style syntax, instead, for the third tab on my test page. The FontAwesome icons are showing on the other tabs, where they are defined with the Unicode entity, and with Froala disabled they are staying as entered, e.g. <ecttab title="& #xf00a;   Tech">

However, I can't get the fa fa-video-camera syntax interpreted even if I put the FontAwesome font reference you suggested (below) in the head. (But for font-weight:bold; my SpryTabbedPanel.css is already as suggested by midvalleydrifter001 (thanks, btw).)

Is this the right syntax for the tab:

<ecttab title=<i class="fa fa-video-camera"></i>   Video>
?

As Glenn found, I'm getting 'fa fa-video-camera' in the tab, and Video> at the beginning of the tab's content. Looking at the source for the page that's generated, it has lost the <i class...> tag so that is not coming through to the browser. It seems like a basic syntax issue.

I also tried it with other string-in-string alternatives but they still lose or mess-up the <i class...> tag.

This is the test page:
https://test.securityforbikes.com/proddetail.php?prod=vincetest

I don't know what's different, now, in what Glenn ended up with and what I'm doing. (Glenn's test page has been down for a while as that would be useful to compare against.)

Thanks in advance for any further suggestions!

Steve.


Pragmasis Limited
https://SecurityForBikes.com

Hi Steve
No, I don't think it is going to work with the <i class="fa fa-video-camera"></i> syntax as that really leaves you with an HTML tag within an HTML tag. What I have that works is for instance...
<ecttab title="&#xf03d; Description">
But you have to have the tabbed panel class set to use the FontAwesome font, for instance...
li.TabbedPanelsTab{
font-family:FontAwesome,sans-serif;
}
The latest version to go out (v7.1.7) now has this by default but you could add that to the site style sheet.

Vince


Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Hi Vince,

I couldn't see how to get around the tag-in-a-tag issue, either, but was inspired that Glenn seemed to get it working? Perhaps if her can confirm then maybe there is another option that avoids the hex-Unicode coding. Doing it that way is working fine, thanks, but only 'cleanly' if I avoid Froala. That's not a disaster, of course, but a bit of a shame as it's a nice feature if it works without putting binary in the d/b.

I'll see if Glenn sees this and sheds any light but it may be we've got it working as well as it can, for the foreseeable future.

Thanks again,

Steve.

Pragmasis Limited
https://SecurityForBikes.com

Hi there,

Well, it is working OK, but it does involve hex-unicode. This is what I have and you can see an example at this test page ...
https://dev.threedogvegas.com/proddetail.php?prod=BAK-NAT-CHI-ADU-4LB

header.php:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

includes.php:
$GLOBALS['defaultdescriptiontab']='<ecttab title="#xf15c; Description">';

sprytabbedpanels.css:
.TabbedPanelsTab {
font: 1.0em FontAwesome, Arial, Helvetica, sans-serif !important;
}

Product Admin ...:
<ecttab title="#xf15c; Description">
<ecttab title="#xf0ca; Ingredients">
<ecttab title="#xf200; Guaranteed Analysis">

I have noticed that if you have only one tab then you don't need to add the <ecttab title= ... for the default Description tab title in the product admin, it is included in the includes.php. But if you have two or more tabs, then you do have to add the <ecttab title= ... for the default Description, plus the other tab titles in the product admin.

The downside is that you have to edit each product item if you want to change the tab title icon, except for the default 'Description' tab, at least I haven't figured out a way to add the other tabs to the includes.php.

Glenn

Hi Glenn,

Oh, well, thanks for confirming. Hex-Unicode it has to be, and no Froala (until/unless there is some workaround that stops it interpreting the hex value into binary).

I agree that it would be a shame if you decided to change the FA icon across loads of products as the hex values are effectively hard-coded into all the product descriptions. You could get around that, if you wanted to, by putting in some PHP to reference a global variable that is defined to hold the hex string. Hmm, that might not be a bad idea, anyway, as we could use something more meaningful as the variable name to represent the icon involved.

I've not tried embedding PHP into the product description fields and that may be something that is deliberately filtered-out in Vince's code??? ...Or it could be that it would be executed when the product entry is written back into the d/b so it would take itself out before it even gets saved?!

Just an idea. Very possibly not a good one at all ;-)

Thanks again,

Steve.

Pragmasis Limited
https://SecurityForBikes.com

...Just confirming it was a bad idea

E.g. you can put the following into a LongDescription field:
<?php print $productname;?>
but it is simply passed directly through to the browser, without the code being executed on the server. The browser can't 'do' PHP, of course, so it gets ignored.

It would probably create lots of issues to have the LongDescription processed server-side before handing-off to the client, so it's probably a dead end. Apologies for suggesting something no good!

The other way of changing FA icons wholesale across several products would be to write some server-side code to just retrieve, update, and save the data back to the d/b. I suppose a general bulk text-replace like that could be useful for a variety of changes to product data - Vince? ...I imagine that is a way down the priority list

Thanks again, all,

Steve.

Pragmasis Limited
https://SecurityForBikes.com