Remove dependency on Font Awesome, use core Icon API

[laryn]

At this point it would be good to remove the Font Awesome dependency and bundle some SVG icons (or use core icons if they exist), using the core Icon API.

[nattywebdev]

@laryn The display of the icons at present is done by building $block_content, which contains (briefly):

<div>
  <i class="fas fa-shopping-cart" title="View cart"></i> <span class="num-items">1</span> item 
  <i class="fas fa-credit-card" title="Checkout"></i>
</div>

whereas the suggested method to add a core icon, eg, a cart, would be:

<?php print icon('shopping-cart'); ?>

according to https://docs.backdropcms.org/documentation/icon-api

Is there a different way to display the icon consistent with the current method? Or does this require a rather different way to build the output for $block_content?

[laryn]

You could start by testing just replacing the <i class="fas fa-shopping-cart" title="View cart"></i> portion with the new core icon code, and likewise for the credit card icon. Let me know if that works or not.

[nattywebdev]

I have this working now in my clone of the module (I called it 'uc_minibasket and have it as a custom module).

The module shows just the basket icon and a small number when there's content in the basket (cart).

This is the code that replaced the fontawesome themed output:

      if($item_count > 0){
        $block_content .= l(icon('basket', array('attributes' => array('class' => array('basket'),'alt' => t('View basket')))) . $item_text , 'cart', array('html' => TRUE));
      }else{
        $block_content .= icon('basket', array('attributes' => array('class' => array('basket-empty'),'alt' => t('Basket is empty'))));
      }

and it produces this for the contents of .block-content for an empty basket:

This shows the resulting html:

and this for a non-empty basket:

and here's the html:

The colouring and position of the basket content quantity are dealt with by css.

Is this any use to you @laryn ?

[laryn]

Yes, we can definitely use this concept in the module and remove the dependency on Font Awesome. 👍