Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

[davewest]

I would love to use font-awesome icons in place of some text on CSS buttons. I tried searching this thread and the whole forum but am having trouble finding any mention of this so apologies if this has been discussed somewhere.

I thought maybe I could simply replace the button text in the language file with the html code for the FA icon, but when I tried that, for some reason, some kind of default looking image replaced my CSS button.

Has anyone tried this successfully? Thanks for any advice or pointers!

I do this on my site buttons.. if the css button is inside of a form you use one format and if its outside you use another format...CSS buttons are the alt tag and not the image..
includes/languages/english/YOUR_TEMPLATE/button_names.php
inside of forms would be..

define('BUTTON_UNSUBSCRIBE', ' Unsubscribe');
define('BUTTON_UPDATE_ALT', ' Update');
define('IMAGE_DELETE', ' Remove');
define('BUTTON_WRITE_REVIEW_ALT', '  Write Review');
define('BUTTON_CANCEL_REVIEW_ALT', '  Cancel');
define('ICON_UPDATE_ALT', '  Update Cart');
define('BUTTON_LOOKUP_ALT', ' Lookup');

outside of forms..

define('BUTTON_CREATE_ACCOUNT_ALT', '<i class="fa fa-user-plus"></i>  Sign Up');
define('BUTTON_LOG_OFF_ALT', '<i class="fa fa-star"></i>  Log Off');
define('BUTTON_ADD_ADDRESS_ALT', '<i class="fa fa-pencil-square-o"></i>  Add Address');
define('BUTTON_BACK_ALT', '<i class="fa fa-undo"></i> Back');
define('BUTTON_BUY_NOW_ALT', '<i class="fa fa-star"></i>  Buy Now');
define('BUTTON_CANCEL_ALT', '<i class="fa fa-star"></i>  Cancel');
define('BUTTON_CHANGE_ADDRESS_ALT', '<i class="fa fa-star"></i>  Change Address');

if the button is showing a default charter, then the wrong format was used.

[K1979]

I would love to use font-awesome icons in place of some text on CSS buttons. I tried searching this thread and the whole forum but am having trouble finding any mention of this so apologies if this has been discussed somewhere.

I thought maybe I could simply replace the button text in the language file with the html code for the FA icon, but when I tried that, for some reason, some kind of default looking image replaced my CSS button.

Has anyone tried this successfully? Thanks for any advice or pointers!

It may be because of html_output.php files.

includes/functions/html_output.php line283

    if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes' && strlen($alt)<30) return zenCssButton($image, $alt, 'submit', $sec_class, $parameters);

I changed this 30 to 40 and it works.

[earmsby]

This is an interesting idea, but I'm not certain icons convey information as effectively as text labels. Perhaps "in addition to?"

Also have you mapped the buttons to icons to see where the gaps are?

Thanks for this. I take your point, but my feeling is that at this point, a button with a magnifying glass icon next to a field that says "search" is pretty much universally understood to mean "search" and takes up less space than the spelled out word (which is basically repeated as the placeholder text in the search field itself) in a mobile layout. For buttons that have more complex meanings, I wouldn't necessarily swap for FA icons.

I'm not entirely sure what you meant by "Also have you mapped the buttons to icons to see where the gaps are?" Could you expand on that?

Thanks!

[earmsby]

Thanks for this. I will give it a try.

[earmsby]

I do this on my site buttons.. if the css button is inside of a form you use one format and if its outside you use another format...CSS buttons are the alt tag and not the image..
includes/languages/english/YOUR_TEMPLATE/button_names.php
inside of forms would be..

define('BUTTON_UNSUBSCRIBE', ' Unsubscribe');
define('BUTTON_UPDATE_ALT', ' Update');
define('IMAGE_DELETE', ' Remove');
define('BUTTON_WRITE_REVIEW_ALT', '  Write Review');
define('BUTTON_CANCEL_REVIEW_ALT', '  Cancel');
define('ICON_UPDATE_ALT', '  Update Cart');
define('BUTTON_LOOKUP_ALT', ' Lookup');

Thanks for this. I've given it a try and it sort of works. I tried doing this:

define('BUTTON_SEARCH_ALT', ' Search Now'); 

The button text says "search now" but the icon is just a square instead of a magnifying glass. The unicode for the icon I'm using is shown as f002 and I (perhaps mistakenly) thought I should add the "&#x" before that. Maybe the issue is that I'm including font-awesome library correctly in the header (although I do see FA icons in the mobile view).

Will do a little more experimenting and see if I can figure it out.

[davewest]

Thanks for this. I've given it a try and it sort of works. I tried doing this:

define('BUTTON_SEARCH_ALT', ' Search Now'); 

The button text says "search now" but the icon is just a square instead of a magnifying glass. The unicode for the icon I'm using is shown as f002 and I (perhaps mistakenly) thought I should add the "&#x" before that. Maybe the issue is that I'm including font-awesome library correctly in the header (although I do see FA icons in the mobile view).

Will do a little more experimenting and see if I can figure it out.

By bad... I assumed you understood the font.. &#xf002 is font awesome code and used instead of the html class

<i class="fa fa-search"></i>

I would suggest downloading the font list to follow along. The font/icons can be sized to your needs, font awesome doc's as a note, the magnifying icon doesn't mean search to me... I use 5 different ones and none is for searching... all has to do with size.. which is how I use it.

[K1979]

define('BUTTON_SEARCH_ALT', ' Search Now');

Try this CSS.
Change the class name if you want to apply to other buttons.

for Font Awesome 4

.button_search{font-family: "FontAwesome";}

or

.button_search{font-family: "Font Awesome 5 Free";}

https://fontawesome.com/how-to-use/o...seudo-elements

[davewest]

define('BUTTON_SEARCH_ALT', ' Search Now');

Try this CSS.
Change the class name if you want to apply to other buttons.

for Font Awesome 4

.button_search{font-family: "FontAwesome";}

or

.button_search{font-family: "Font Awesome 5 Free";}

OK... so, responsive classic is loading version 4.7.0 through CDN so font-family: "FontAwesome" would be correct. Version 5 has 4 font-family so locking yourself to the one may not workout. where as 4 only has the one. One thing I didn't ask, if this is a local install for development, and no local setup was done for font awesome, then font would not be available for testing. If the CDN is called or a local install, the font is available for use..

[VDecalS]

https://github.com/zencart/zencart/pull/2856

Thank you!

[earmsby]

I'm back with another issue I'm trying to resolve. Lot's of things I like about this template but am finding customizing it to be surprisingly tricky due all the different stylesheets and ways that javascript changes elements. Anyway, on to my current question/problem:

I'm working on resizing a few things in the heading of the product listing (on the desktop view only at this stage). The button for "Add Selected to Cart" was much too big and extended off to the right beyond the right edge of the containing div (note: it goes off the right right when the screen is narrowed a bit. It might not do that if you have a bigger screen resolution but I am on a fairly small sized laptop). It has a lot of padding that seemed a bit extreme to me (30px right and left). I was easily able to add a new css rule to my custom css to decrease that.

But on hover, the button pops back up to the huge size. I can see that this is due to the css in stylesheet_css_buttons.css:

input.submit_button:hover {border:none !important;font-size: 1.2em;display: inline-block;margin:0;padding: 12px 30px 30px 30px !important;}
input.cssButtonHover {border:none;cursor: pointer;border:none;font-size: 1.2em;display: inline-block;margin:0;padding: 12px 30px 30px 30px !important;}

I don't want to completely change this across the board. I'd like to target just this particular button which is causing the problem. My understanding is that you can override an !important rule by creating another rule with !important and greater specificity. So I added a style:

input#submit1.cssButtonHover.button_add_selected.button_add_selectedHover{
    padding: 5px 5px; !important;
}

But when the page renders, my custom style is still overridden by the original rule in stylesheet_css_buttons.css. I've tried multiple different ways to target the button in the hover state and override the !important rule but nothing seems to work.

I checked that my custom stylesheet loads later than stylesheet_css_buttons.css in the header and it appears to do so. Been banging my head on this for quite a while now.

Here's a link to the page I'm describing: http://subitomusic.com/testing_estor...dex&cPath=1_13