Responsive Icons

This page describes how to center an icon in a Canvas page, with a horizontal line across the page behind the icon. This code is responsive, so no matter what size screen it is being viewed on, the icon will always be centered on that horizontal line.

  1. The first thing you need to do is find Links to an external site. or create the icon Links to an external site.. For reference, the Unit 1 icon below is 201 x 112 and the assignment icon is 54 x 54.
  2. Once you have your icon created, 

Unit 1 icon

<p style="width: 100%; text-align: center; border-bottom: 2px solid #ccc; position: relative; margin: 80px 0;">

    <img style="position: absolute; top: -55px; margin-left: -100px;" src="file address" alt="Unit 1 icon"  />

</p>

 

Assignment icon

assignments icon

I use this image with the code below to create a responsive icon at the top of assignments to create a subtle visual queue that it is an assignment. The code centers the icon on top of a horizontal line and the icon stays in the center regardless of screen size.

<p style="width: 100%; text-align: center; border-bottom: 1px solid #ccc; position: relative; margin: 40px 0;">

<img style="position: absolute; top: -27px; margin-left: -27px;" src="file address" alt="assignment icon" />

</p>

Icons are available on Canvas Commons. Search for Cuyamaca.