Adding Fontawesome Icons?

  • Posts: 37
  • Thank you received: 5
10 years 3 weeks ago #198596

-- HikaShop version -- : 2.4.0

Hi there,

Is it possible to use font awesome icons in Hikashop, for example to add an Icon to the checkout button:

<i class="fa fa-arrow-right"></i>

What is the best way to implement this?

Best regards,

Jethro.

EDIT: :blush: So sorry for posting this in the wrong category! Should go in the Display Category. :blush:

Last edit: 10 years 3 weeks ago by Jethro.

Please Log in or Create an account to join the conversation.

  • Posts: 26232
  • Thank you received: 4035
  • MODERATOR
10 years 3 weeks ago #198597

Hi,

Depending where you want to put the icon, you can use a view override (like "checkout | step") or a translation override.
More about the HikaShop customization: www.hikashop.com/support/support/documen...ize-the-display.html

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.
The following user(s) said Thank You: Jethro

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 5
10 years 3 weeks ago #198710

Worked a charm! Many Thanks!

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 5
10 years 3 weeks ago #198750

So a quick question again, I want to add the following icon to my "add to cart" button on my product page...

<i class="fa fa-plus-square"></i>

Using FireBug, how to I know which view to edit, and how do I know where to inject the code?

Many thanks,

Jethro.

Please Log in or Create an account to join the conversation.

  • Posts: 26232
  • Thank you received: 4035
  • MODERATOR
10 years 3 weeks ago #198776

Hi,

You can use the documentation that I gave you in my previous message.
See below in the page for the product page description
www.hikashop.com/support/support/documen...-display.html#layout

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.
The following user(s) said Thank You: Jethro

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 5
10 years 2 weeks ago #199646

Hi there, thanks for the help!

So I added the code: <p class=fa fa-arrow-circle-right></p> to the language override in the Hikashop asked and it does not show correctly, see the screenshot below:



Where am I going wrong? :blush:

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 26232
  • Thank you received: 4035
  • MODERATOR
10 years 2 weeks ago #199661

Hi,

Without a link to a page or more details about what that "checkout" is exactly ; it will be difficult to help you correctly.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.
The following user(s) said Thank You: Jethro

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 5
10 years 2 weeks ago #199696

Hi that is the Hikashop Checkout Module, you can see it in our store: www.smart-drones.com/store .

Many thanks,

Jethro.

Please Log in or Create an account to join the conversation.

  • Posts: 846
  • Thank you received: 92
10 years 2 weeks ago #199722

link to css file
did you add the link to css file that define location of font library ( otf .ttf svg .....)
in index.php file add in the <head> this code :oops: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">.

define library
@font-face{
font-family:'gzipper';
src: url('gzipperblot.eot');
}

initiate library

iconic {
font-family: gzipper , Helvetica, Arial, sans-serif;
}

call the glyph
<span class="iconic " data-glyph="microphone">
.iconic[data-glyph="microphone"]:before {
    content: "";
}

Last edit: 10 years 2 weeks ago by lionel75.
The following user(s) said Thank You: Jethro

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 5
10 years 2 weeks ago #199723

Thanks for the response! This really has me scratching my head...

The CSS file should be linked fine as font awesome is working just perfectly on the rest of my site, in addition font-awesome is integrated into my template (T3 Bootstrap) so it should work.

Please Log in or Create an account to join the conversation.

  • Posts: 846
  • Thank you received: 92
10 years 2 weeks ago #199724

Hi
In you actual code there of the page there is no selector ( fa-*) that call font awesome !

Take care that checkout is not a text content but show/mange by the <input> html tag !!

I see that css file fontawesome is load ( OK basic )

Does the custom layout override is really load ?

Attachments:
Last edit: 10 years 2 weeks ago by lionel75.
The following user(s) said Thank You: Jethro

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 5
10 years 2 weeks ago #199726

I really appreciate the time you took to help me,

Here is what I have done.

1 - Gone to the language override section in configuration in the Hikashop backend and added the code: <i class="fa fa-arrow-circle-right"></i> to the field PROCEED_TO_CHECKOUT=

So it looks like this:

PROCEED_TO_CHECKOUT="Checkout <i class="fa fa-arrow-circle-right"></i>"

This is how it looks in my backend:



However it still fails and shows the code in the checkout button...



It should not be a complicated thing, you can even see on my home page and in the menu I am using fontawesome all over.

Very confusing, :whistle:

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 5
10 years 2 weeks ago #199728

lionel75 wrote: Hi
In you actual code there of the page there is no selector ( fa-*) that call font awesome !

Take care that checkout is not a text content but show/mange by the <input> html tag !!

I see that css file fontawesome is load ( OK basic )

Does the custom layout override is really load ?


The error should be showing on the cart now if you look again.

It would be great if Hikashop was integrated with fontawesome out of the box!

Please Log in or Create an account to join the conversation.

  • Posts: 846
  • Thank you received: 92
10 years 2 weeks ago #199729

you don't understand the concept of content DOM and dynamic tag with atrribute .
you CAN' T use translation in the way you do because the string checkout is the value of a arrtibute name call value in < input value = "checkout " > </input> . The brower take this text like raw text and show it without compute it /add it in the node of <input > .

you should put the translation value not inside <input value ="here" ></input > but rather <input value="" > here</input>.
In web design what you see can be implemented in many way !!! you have to edit the php file and change the location where your translation string is call put it in hte green location .



The browser understand/show manage data after build a DOM ( memory structure of document where all tag define a node and node contain node . the content in value="" ll be never a node. Try to select the string ""Checkout <i class=fa fa-arrow-circle-right></i>"" you can't so this text is not real text it a kind of shadow text : you see it but you can't select it !!!!! . See the capture screen ; in the code source you don't see the value beetween/inside <input >here </input> but you see in the html page ...... ( to be dig ...... by yourself ) .

hope this ll help ( i think yes )

Attachments:
Last edit: 10 years 2 weeks ago by lionel75.
The following user(s) said Thank You: Jethro

Please Log in or Create an account to join the conversation.

  • Posts: 846
  • Thank you received: 92
10 years 2 weeks ago #199734

The way the page is show ( you call it an error ) is not an error and is the way it should renderer but it show you don't understand HTML . Support fontawesome by hikashop is not the way to resolve your problem . there is many free font and fontawesome is only one among hunderd . Hikashop could not support too many thing ( they do a lot of work in php and also in csshtml js side ) . The problem is about how you understand master CSS HTML JS . Any developper should hire a web designer to have the look and feel they want . In CMS many buy a template ( it is the way to use CMS and very easy efficient ) but you ll not know howto custom them outside the joomla GUI backend click logic when a technical problem occur. Template don't come with one look and feel design but also with options to custom template like Dreamweaver but with predefine option specific to their template ! The people who create the template know the code logic ........

even it take time try to understand the example i give in my first post
.iconic[data-glyph="microphone"]:before {
content: "";
}
what mean the value after content ? ( attach to pseudo element = virtual ghost data )
what mean :before ? ( pseudo element )
what mean data-glyph ( html 5 concept name data- )
do i need a script to manage HTML5 data- ?

Last edit: 10 years 2 weeks ago by lionel75.
The following user(s) said Thank You: Jethro

Please Log in or Create an account to join the conversation.

  • Posts: 26232
  • Thank you received: 4035
  • MODERATOR
10 years 2 weeks ago #199738

O_o

You can't add HTML code in an attribute of an HTML tag ; the checkout button is a button and you can put some HTML in the "value" of the button.
So if you use normal buttons (as it is the case on your website), you can't use a translation override.
It would be possible if you changed the "button style" option of the HikaShop configuration to "CSS" instead of "normal".
But in that case, that also means that you would have to adapt the CSS of the buttons so that they display again like you want.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.
The following user(s) said Thank You: Jethro

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 5
10 years 2 weeks ago #199750

Phew! This is more complicated than I thought it would be! Got my brain sweating... :woohoo:

Thanks Lionel, your in-depth explanations are extremely helpful, it looks like I need to learn some PHP to resolve this issue.

EDIT: Jerome! Your solution was extraordinarily useful and ultimately helped me resolve my issues.

Just to confirm: Changing the button display to CSS wont cause any problems? Is there a major difference between the two options or any problems I might have?

For those struggling with something similar here are the steps I took:

1 - I changed the button display setting in configuration/display to "CSS" this removed all of my css changes for the buttons.

2 - Next I re-styled all the buttons to look how I wanted them to

3 - Next I went to the language overrides and added the Fontawesome icons to the language override section. Be sure to use single brackets 'example' instead of double brackets "example".

This is how the edits looked in my en-GB language override:

ADD_TO_CART='<i class="fa fa-shopping-cart"></i> Add to cart'

And that is that! All icons working like a charm... feel free to take a look: www.smart-drones.com/store

10/10 support guys, thanks!

Last edit: 10 years 2 weeks ago by Jethro.
The following user(s) said Thank You: Jerome, dilum_tharaka

Please Log in or Create an account to join the conversation.

  • Posts: 846
  • Thank you received: 92
10 years 2 weeks ago #199756

The translation file is for translate content not add style or html markup !!.
Nothing is difficult when understand what we do but click on hks button BE don't let us understand what occur on the code source !!
If all work it is ok nobody ( consumer) ll look at the code source !!
Here the wysiwyg and code source after change

Attachments:
Last edit: 10 years 2 weeks ago by lionel75.
The following user(s) said Thank You: Jethro

Please Log in or Create an account to join the conversation.

  • Posts: 37
  • Thank you received: 5
10 years 2 weeks ago #199757

Hi there! Please forgive me I do not quite understand... is this a problem?

Last edit: 10 years 2 weeks ago by Jethro.

Please Log in or Create an account to join the conversation.

  • Posts: 846
  • Thank you received: 92
10 years 2 weeks ago #199759

Not really because you done it like that so you know that for change/update the code you have to go to the translation file. if a people who translate site has to create different language version ; he ll not understand why there is <i> and class selector in the translation file and he could replace all the string by the translation of "add card" in french " ajouter au panier".

my way
I think better is to put the html tag and class in the layout . Layout view contain look and feel , icon are for look and feel ................theme .......In a way font icon don't have to be translate . icon font are international language !!!

hks way
seem they manage the issue you have by hks BE option so i can't say nothing about the way they implement it . it work ...so all is ok ...

the site use joomla template purity iii
regard's
(NB i don't really resolve my joomla date issue today )

Last edit: 10 years 2 weeks ago by lionel75.
The following user(s) said Thank You: Jethro, tesla

Please Log in or Create an account to join the conversation.

Time to create page: 0.098 seconds
Powered by Kunena Forum