Portal: How to change a brick icon
In this How to, we change the “New request” icon from a conversation bubble to a paper plane.
- How to change a brick icon
- How To
- Administrator, Integrator, Developer
- Portal, Customization
- iTop version:
What you will need to:
Know how to make an iTop extension and upgrade your system,
Have an iTop system with the demo data and the enhanced portal installed,
Have access to an account with enough rights to connect to the portal (usually this means having the
Aim of this tutorial
Step by step instructions
Creating the extension
First, we need to create an iTop extension that will alter the portal XML configuration to change the icon of the brick. Check the Extension modules part from the customization guide (iTop Customization) if necessary.
Name the extension as sample-portal-change-brick-icon.
Remove the main.sample-portal-change-brick-icon.php file as we won't need any PHP code.
Remove the *.dict.sample-portal-change-brick-icon.php files as we won't need any translations.
Changing the portal configuration
Now that we have the extension, we just need to make an XML delta and change the portal configuration to define which icon we want. Open the datamodel.sample-portal-change-brick-icon.xml file and paste the following code:
<?xml version="1.0" encoding="UTF-8"?> <itop_design xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.7"> <module_designs> <module_design id="itop-portal"> <bricks> <brick id="services"> <decoration_class> <default _delta="force">fas fa-paper-plane fa-2x fa-fw</default> </decoration_class> </brick> </bricks> </module_design> </module_designs> </itop_design>
This redefines the services (a.k.a “New request”) brick icon with ours. The important parts are:
fas fa-paper-plane The icon classes to be found on the FontAwesome v5 website (free category only).
fa-2x Makes sure the icon has the same size as the others in the navigation menu.
fa-fw Makes sure the icon will be centered like the others in the navigation menu.
Upgrading the system
Finally run an upgrade of your iTop system with the new extension option checked and access the portal. You should see the new New request icon changed by our paper plan.
You can find this extension on our GitHub here 👌