An icon is an additional indicator to represent an element more obviously in a web page. It is mostly displayed on a button or a label. DPCalendar uses icons on different places. Mostly to highlight button actions or event attributes like the location or date. DPCalendar uses the widely accepted icon set from font awesome, but only the ones which are actually needed.
Nowadays the standard to display an icon is inline as SVG and not anymore with a CSS class and a font file. The benefit is that only the icons are loaded which are actually needed. It speeds up the rendering process and lowers the footprint of your site. All icons from DPCalendar can be found in the folder /media/com_dpcalendar/images/icons.
There are two ways to override icons in DPCalendar. If you want to override single icons then you can place them in a specific folder in your template. This is the easy way. If you want to use a complete different approach, for example using a font file and working with CSS classes, then you can do a layout override. This method is for more for experienced web developers as some basic PHP knowledge is needed. We will explain both approaches in the following chapters.
DPCalendar uses a three step process to determine the location of the icon. If a file is found, then it reads the icon from the disc and does print it on the page. You can override the file by placing it into the following folders:
Lets make an example. You want to replace download icon which has the file download.svg. Then you can place a new svg file on /templates/{your template}/images/com_dpcalendar/icons/download.svg. DPCalendar will then pick up that one instead from it's own images folder.
The logic of icon rendering can be found in the file /components/com_dpcalendar/layouts/block/icon.php. Copy that file into the folder /templates/{your template}/html/layouts/com_dpcalendar/block/icon.php and adapt it to your needs. To access the icon type you can use $displayData['icon']. Sometimes a title is provided which is accessible as variable $displayData['title'].
Comments (0)