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

You can replace the default <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>