Quick Links – Custom icons
While we recommend that you use the icons that are provided, you can use any image as an icon. We recommend that you use a square image that is at least 100 x 100 pixels in size and has adequate white space around it. This way, nothing is cut off when a circle is placed around the image.
To reference an image, move the image in the HomePages/images folder of your CHP zip file.
To use a custom image, remove the <svg>
element and add an
<img>
or <object>
element.
CSS styling is used automatically for the images. Only the src
attribute is
required.
You must begin the custom icon's file path with ../resources/
. This is
special syntax to reference files inside the HomePages.zip file.
For example, <img src="../resources/images/timeOffXI.png" height="100"
width="100"/>
.
Custom PNG icon
You can replace the default <svg>
element with an
<img>
element. An icon from the HomePages/images
folder is loaded.
<div class="cell">
<a id="pay" target="" onclick="hcm.util.navigateTo('/menu/XiEmployeeMenu.Pay')" class="layerIcon inforHyperlink headerText">
<!-- <svg aria-hidden="true" focusable="false" role="presentation" class="icon"><use xlink:href="#icon-paychecks"></svg> -->
<img src="../resources/images/customPaychecks.png" height="100" width="100"/>
<div class="caption">
<div class="captionHeader">Pay</div>
<div class="captionText">View your compensation history, breakdown, and other details.</div>
</div>
</a>
</div>
Custom SVG icon
You can replace the default <svg>
element with an
<object>
element. An icon from the HomePages/images
folder
is loaded.
<div class="cell">
<a id="engagement" target="" onclick="hcm.util.navigateTo('/menu/XiEmployeeMenu.Engagement')" class="layerIcon inforHyperlink headerText">
<!-- <svg aria-hidden="true" focusable="false" role="presentation" class="icon"><use xlink:href="#icon-engagement"></svg> -->
<object data="../resources/images/customEngagement.svg" width="100" height="100"> </object>
<div class="caption">
<div class="captionHeader">Engagement</div>
<div class="captionText">See your accomplishments and stay connected.</div>
</div>
</a>
</div>
Custom user image icon
You can replace the default <svg>
element with an
<img>
element. An icon from the UserImage business class is
loaded.
<div class="cell">
<a id="time" target="" onclick="hcm.util.navigateTo('/menu/XiEmployeeMenu.TimeOff')" class="layerIcon inforHyperlink headerText">
<!-- <svg aria-hidden="true" focusable="false" role="presentation" class="icon"><use xlink:href="#icon-time-off-approval"></svg> -->
<img src="../image/UserImage(customTimeOff).Image?size=100x100" height="100" width="100"/>
<div class="caption">
<div class="captionHeader">Time Off</div>
<div class="captionText">Track your work hours and submit time off requests.</div>
</div>
</a>
</div>
Custom external icon
<svg>
element with an
<img>
element. An icon from an external website using a
fully-qualified URL is loaded. You must have a network access to the external website where
the icon is
loaded.<div class="cell">
<a id="time" target="" onclick="hcm.util.navigateTo('/menu/XiEmployeeMenu.TimeOff')" class="layerIcon inforHyperlink headerText">
<!-- <svg aria-hidden="true" focusable="false" role="presentation" class="icon"><use xlink:href="#icon-time-off-approval"></svg> -->
<img src="https://cdn-icons-png.flaticon.com/512/149/149520.png" height="100" width="100"/>
<div class="caption">
<div class="captionHeader">Time Off</div>
<div class="captionText">Track your work hours and submit time off requests.</div>
</div>
</a>
</div>