#7035 Icons

Parent Category:
Last Updated:
Allon Moritz, Thursday, 20 January 2022 12:21
Tuesday, 11 June 2019 09:46


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.

DPCalendar icon management

Icon rendering

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.

Icon overrides

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.

Template override

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:

  • /templates/{your template}/images/com_dpcalendar/icons/
  • /templates/{your template}/images/icons/

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.

Layout override

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)

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.