Thread: Font Awesome 5

Results 1 to 7 of 7
  1. #1
    Join Date
    Dec 2007
    Location
    Payson, AZ
    Posts
    1,076
    Plugin Contributions
    15

    Default Font Awesome 5

    I wanted to post this for anyone else that may want to upgrade to Font Awesome 5.

    Font Awesome 5 was a full rewrite and the Unicode charter set no longer work as they did with version 4. With version 4 using the Unicode like this ‘&#xf217; Add to Cart ‘ worked when creating input buttons. With version 5 you now have to do it like this ‘<i class=”fa”>&#xf217;</i> Add to Cart’ or use it within a class as

    Code:
    .cartbutton {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f217";
    }
    which does not work for input buttons. Also this ‘<i class="fas fa-cart-plus"></i> Add to Cart’ works for links or button tags not input buttons.

    What to do if you want to use version 5 and Unicode!

    One difference to note: there are different icon sets to use!

    Style Availability---------Style Prefix--------Example

    Solid Free------------------- fas----------------- <i class="fas fa-camera"></i>
    Regular Pro Required----- far----------------- <i class="far fa-camera"></i>
    Light Pro Required--------- fal----------------- <i class="fal fa-camera"></i>
    Duotone Pro Required---- fad----------------- <i class="fad fa-camera"></i>
    Brands Free----------------- fab-----------------<i class="fab fa-font-awesome"></i>

    For some time now I have been loading Font Awesome from a free account with them and not the default CDN used in the responsive classic template… With the kit you could modify to only load what you want and not the whole 7+k of icons.. The kit also has the ability to mix version 4 and 5 so the Unicode charters still work as before and you still have the new icons! However, version 4 unicode works, but the tags need to match version 5 standards. In Font Awesome documents is a list of changes, as a example version 4 was <i class=”fa fa-arrow-circle-o-down”></i> is now <i class=”far fa-arrow-alt-circle-down”></i> ..

    In my testing, using a sample html page following FA instructions for hosting the fonts worked. However, when trying the same instructions on my ZC site they did not work for me. I had to setup both versions for the Unicode and new tags to work offline or if FA fails to load.

    includes/templates/MY_TEMPLATE/css/font-awesome.css (version 4)
    includes/templates/MY_TEMPLATE/css/all.css (version 5)
    includes/templates/MY_TEMPLATE/fonts (version 4 font)
    includes/templates/MY_TEMPLATE/webfonts (version 5 font)

    With the follow added just below the call to load jQuery to includes/templates/MY_TEMPLATE/common/html_header.php
    Code:
    <script src="https://kit.fontawesome.com/YOUR_KIT_ID.js" crossorigin="anonymous"></script>
    <script type="text/javascript">
    (function($){
    var $span = $('<span class="fas" style="display:none"></span>').appendTo('body');
    if ($span.css('font-family') !== 'Font Awesome 5 Free' ) {
    // Fallback Link
    $('head').append(<?php echo '\'<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'font-awesome.css' . '" />\''; ?>);
    $('head').append(<?php echo '\'<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'all.css' . '" />\''; ?>);
    }
    $span.remove();
    })(jQuery);
    </script>
    Why upgrade! Why not… tons of new fonts, cool new things to work with such as stacked icons and svg’s. Font Awesome https://fontawesome.com/start

    By using the kit and loading both is giving me time to work through my code and updating tags.
    Dave
    Always forward thinking... Lost my mind!

  2. #2
    Join Date
    Aug 2007
    Location
    Gijón, Asturias, Spain
    Posts
    2,571
    Plugin Contributions
    30

    Default Re: Font Awesome 5

    Thanks for the detailed explanation.

    Why upgrade! Why not
    ...I think you have explained perfectly why not!
    While I am all for keeping things updated, for me at least it looks like a pile of work to fix something that isn't broken (yet).

    I hope you can get it all working efficiently for the benefit of the rest of us.
    Steve
    github.com/torvista: Spanish Language Pack, Google reCaptcha, Structured Data, Multiple Copy-Move-Delete, Image Checker, BackupMySQL Admin/Auto...

  3. #3
    Join Date
    Dec 2007
    Location
    Payson, AZ
    Posts
    1,076
    Plugin Contributions
    15

    Default Re: Font Awesome 5

    Quote Originally Posted by torvista View Post
    While I am all for keeping things updated, for me at least it looks like a pile of work to fix something that isn't broken (yet).
    .
    Thanks..
    I've spent to many years cracking to not update... now its just a habit. Ubuntu gedit has a find-in-file so the update was supper simple.. my only search now is the change on the Unicode issue, until then the kit works.. which may lead over to full use of Scalable Vector Graphics (SVG)...
    Dave
    Always forward thinking... Lost my mind!

  4. #4
    Join Date
    Jan 2004
    Posts
    66,364
    Blog Entries
    7
    Plugin Contributions
    274

    Default Re: Font Awesome 5

    I just skip the unicode issue altogether by using <button> elements, and not using input submit elements. That way you just use the regular markup. Nothing special required.
    (Ya, requires some hacking of the template HTML, but I'm already doing that when I'm adding FA icons anyway.)
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

  5. #5
    Join Date
    Dec 2007
    Location
    Payson, AZ
    Posts
    1,076
    Plugin Contributions
    15

    Default Re: Font Awesome 5

    Quote Originally Posted by DrByte View Post
    I just skip the unicode issue altogether by using <button> elements, and not using input submit elements. That way you just use the regular markup. Nothing special required.
    (Ya, requires some hacking of the template HTML, but I'm already doing that when I'm adding FA icons anyway.)
    I was working that way too, was trying to do something simple or less hacking more observer... After reading up on the future of SVG, icon stacking, and new elements, it's getting interesting..
    Dave
    Always forward thinking... Lost my mind!

  6. #6
    Join Date
    Dec 2007
    Location
    Payson, AZ
    Posts
    1,076
    Plugin Contributions
    15

    Default Re: Font Awesome 5

    Quote Originally Posted by davewest View Post
    I was working that way too, was trying to do something simple or less hacking more observer... After reading up on the future of SVG, icon stacking, and new elements, it's getting interesting..
    I feel that an expiation may be needed.. One Example, to get input fields to display font icons in a css button is to change the code in your template files with button tags like the following..

    Lets do the includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.php
    Add to Cart button looks like this
    Code:
    zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
    To add a FA add to cart icon I changed it to
    Code:
    '<button class="cssButton submit_button" type="submit"><i class="fas fa-cart-plus"></i> ' . BUTTON_IN_CART_ALT . ' </button>' ;
    In your includes/templates/YOUR_TEMPLATE/css/stylesheet_css_buttons.css copy and paste your input button css and change the input. to button.
    Code:
    button.submit_button {border:none !important;font-size: 1.2em;display: inline-block;margin:0;padding: 12px 30px 30px 30px;}
    button.submit_button:hover {border:none !important;font-size: 1.2em;display: inline-block;margin:0;padding: 12px 30px 30px 30px !important;}
    button.cssButtonHover {border:none;cursor: pointer;border:none;font-size: 1.2em;display: inline-block;margin:0;padding: 12px 30px 30px 30px !important;}
    Of course your css and button may be different depending on your template. the button element needs the type="submit" field for it to work as a form submit button.
    Dave
    Always forward thinking... Lost my mind!

  7. #7
    Join Date
    Dec 2007
    Location
    Payson, AZ
    Posts
    1,076
    Plugin Contributions
    15

    Default Re: Font Awesome 5

    In Example One , we hard coded the font icons in the button code. The problem with this is you can not use image buttons again without changing the code back plus you would have to edit each file if you wanted to change icons. In Example Two I’ll change the includes/functions/html_output.php file such that you can turn css buttons off and display the hard buttons if you wish to. Plus you can use different icons based on languege.

    Files affected are:
    includes/functions/html_output.php (Master file)
    includes/languages/english/YOUR_TEMPLATE/button_names.php
    includes/templates/YOUR_TEMPLATE/css/stylesheet_css_buttons.css

    html_output.php Lines in red need to be edited/added..
    Code:
      function zen_image_submit($image, $alt = '', $parameters = '', $sec_class = '') {
        global $template, $current_page_base, $zco_notifier;
        if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes' && strlen($alt)<70) return zenCssButton($image, $alt, 'submit', $sec_class, $parameters); //modified for FA5
        $zco_notifier->notify('PAGE_OUTPUT_IMAGE_SUBMIT');
        $alt = trim(explode('</i>', $alt)[1]);  //modified for FA5
         $image_submit = '<input type="image" src="' .  zen_output_string($template->get_template_dir($image,  DIR_WS_TEMPLATE, $current_page_base, 'buttons/' . $_SESSION['language'] .  '/') . $image) . '" alt="' . zen_output_string($alt) . '"';
    
        if (zen_not_null($alt)) $image_submit .= ' title=" ' . zen_output_string($alt) . ' "';
    
        if (zen_not_null($parameters)) $image_submit .= ' ' . $parameters;
    
        $image_submit .= ' />';
    
        return $image_submit;
      }
    and

    Code:
     function zenCssButton($image = '', $text, $type, $sec_class = '', $parameters = '') {
       global $css_button_text, $css_button_opts, $template, $current_page_base, $language;
    
       $button_name = basename($image, '.gif');
    
        // if no secondary class is set use the image name for the sec_class
        if (empty($sec_class)) $sec_class = $button_name;
        if(!empty($sec_class)) $sec_class = ' ' . $sec_class;
        if(!empty($parameters))$parameters = ' ' . $parameters;
        $mouse_out_class  = 'cssButton ' . (($type == 'submit') ? 'submit_button button ' : 'normal_button button ') . $sec_class;
         $mouse_over_class = 'cssButtonHover ' . (($type == 'button') ?  'normal_button button ' : '') . $sec_class . $sec_class . 'Hover';
        // javascript to set different classes on mouseover and mouseout: enables hover effect on the buttons
        // (pure css hovers on non link elements do work work in every browser)
         $css_button_js =  'onmouseover="this.className=\''. $mouse_over_class .  '\'" onmouseout="this.className=\'' . $mouse_out_class . '\'"';
    
        if (defined('CSS_BUTTON_POPUPS_IS_ARRAY') && CSS_BUTTON_POPUPS_IS_ARRAY == 'true') {
           $popuptext = (!empty($css_button_text[$button_name])) ?  $css_button_text[$button_name] : ($button_name .  CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT);
          $tooltip = ' title="' . $popuptext . '"';
        } else {
          $tooltip = '';
        }
        $css_button = '';
    
        if ($type == 'submit'){
          // form input button
         if ($parameters != '') {
             // If the input parameters include a "name" attribute, need to emulate  an <input type="image" /> return value by adding a _x to the name  parameter (creds to paulm)
            if (preg_match('/name="([a-zA-Z0-9\-_]+)"/', $parameters, $matches)) {
              $parameters = str_replace('name="' . $matches[1], 'name="' . $matches[1] . '_x', $parameters);
            }
             // If the input parameters include a "value" attribute, remove it since  that attribute will be set to the input text string.
            if (preg_match('/(value="[a-zA-Z0=9\-_]+")/', $parameters, $matches)) {
              $parameters = str_replace($matches[1], '', $parameters);
            }
          }  /* */
          
          // -----
          // Give an observer the chance to provide alternate formatting for the button (it's set to an empty
          // string above).  If the value is still empty after the notification, create the standard-format
          // of the button.
          //
          $GLOBALS['zco_notifier']->notify(
                'NOTIFY_ZEN_CSS_BUTTON_SUBMIT', 
                array(
                    'button_name' => $button_name,
                    'text' => $text,
                    'sec_class' => $sec_class,
                    'parameters' => $parameters,
                ),
                $css_button
          );
          if ($css_button == '') {
           //  $css_button = '<input class="' . $mouse_out_class . '" ' .  $css_button_js . ' type="submit" value="' . $text . '"' . $tooltip .  $parameters . ' />';
            $css_button = '<button class="' . $mouse_out_class . '" ' .  $css_button_js . ' type="submit" ' . $parameters . ' >' . $text .  '</button>';  // modified for FA5
          }
        }
    
        if ($type=='button'){
          // link button
          // -----
          // Give an observer the chance to provide alternate formatting for the button (it's set to an empty string
          // above).  If the value is still empty after the notification, create the standard-format
          // of the button.
          //
          $GLOBALS['zco_notifier']->notify(
                'NOTIFY_ZEN_CSS_BUTTON_BUTTON', 
                array(
                    'button_name' => $button_name,
                    'text' => $text,
                    'sec_class' => $sec_class,
                    'parameters' => $parameters,
                ),
                $css_button
          );
          if ($css_button == '') {
             $css_button = '<span class="' . $mouse_out_class . '" ' .  $css_button_js . $tooltip . $parameters . '>&nbsp;' . $text .  '&nbsp;</span>';
          }
        } 
        return $css_button;
      }
    Button name file holds your buttons and alt defines if it’s not in your template folder, copy it there. This is where you can add the font icons to match your languages. Each language should have it’s own button name file.. besure to use the right style, they are fas, far, and fab..

    Code:
    define('BUTTON_IN_CART_ALT', '<i class="fas fa-cart-plus"></i> Add to Cart');  
    define('BUTTON_LOGIN_ALT', '<i class="fas fa-sign-in-alt"></i> Sign In');
    define('BUTTON_LOOKUP_ALT', '<i class="far fa-eye"></i> Lookup');
    This was the one I used on my site, I'm now fully using Font Awesome 5. That about covers what I fond..
    Dave
    Always forward thinking... Lost my mind!

 

 

Similar Threads

  1. Replies: 3
    Last Post: 29 Nov 2018, 02:44 PM
  2. v154 Rubles... Font Awesome is the answer, but database change necessary
    By s_mack in forum Basic Configuration
    Replies: 6
    Last Post: 16 Nov 2015, 06:51 AM
  3. Adding Font Awesome Icon to the Add to Cart Button
    By RandyRand in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 17 Feb 2014, 01:02 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR