Icons not centered

[HeideeVincent]

I've added an icon to a button and it's not centered. I would like to be able to center it or make it smaller. I've tried adding some html to affect the height and width. I've managed to change the color of the icon, but that's it. This is my code at the moment: 

<p><a id="" class="Button" title="Back to Lesson" href="https://virginia.atomiclms.com/courses/1/pages/1-dot-1-experiential-learning-definitions?module_item..." target="" data-api-endpoint="https://virginia.atomiclms.com/api/v1/courses/1/pages/1-dot-1-experiential-learning-definitions" data-api-returntype="Page"><i class="icon-Line icon-arrow-open-start"></i>Back to Lesson</a></p>

[Chris_Hofer · Accepted solution]

Hi @HeideeVincent ...

Instead of trying to make things look the way you want with HTML code, what about creating a simple image that you can just re-use over and over again in your course as you see fit?  For example, I created this image in about 2 minutes using the Paint program on my Windows laptop:

Then, I can just create a link on this image to wherever I want in my course (being sure to also add "Alt" text for screen readers, of course).  This gives you a bit more creativity in creating a cool looking button for your course...using color, shapes, etc.

How do I create hyperlinks to course or group cont... - Instructure Community (canvaslms.com) -- use the procedure in this Guide to create links on images, too.

The suggestion from @StephenBryant01 may be ok, but tables are not as accessible and are typically used to hold data.  So, you might want to consider something other than that.

Just a thought...for what it's worth.  Hope to hear back from you soon.

[StephenBryant01]

It may be klunky, but I use tables without borders. By adjusting the table ( and or cell) attributes / size, I have had good success.

Hope this helps

[Chris_Hofer · Accepted solution]

Hi @HeideeVincent ...

Instead of trying to make things look the way you want with HTML code, what about creating a simple image that you can just re-use over and over again in your course as you see fit?  For example, I created this image in about 2 minutes using the Paint program on my Windows laptop:

Then, I can just create a link on this image to wherever I want in my course (being sure to also add "Alt" text for screen readers, of course).  This gives you a bit more creativity in creating a cool looking button for your course...using color, shapes, etc.

How do I create hyperlinks to course or group cont... - Instructure Community (canvaslms.com) -- use the procedure in this Guide to create links on images, too.

The suggestion from @StephenBryant01 may be ok, but tables are not as accessible and are typically used to hold data.  So, you might want to consider something other than that.

Just a thought...for what it's worth.  Hope to hear back from you soon.

[RichC · Accepted solution]

You can add style="vertical-align: bottom;" to your icon to line it up. Your updated code would now be:

<p><img style="display: block; margin-left: auto; margin-right: auto; padding: 5px; border: 1px solid grey;" src="https://tds.instructure.com/courses/229/files/5781/preview" alt="Donkeys together in the field" data-api-endpoint="https://tds.instructure.com/api/v1/courses/229/files/5781" data-api-returntype="File" /></p>
<p><a id="" class="Button" title="Back to Lesson" href="https://virginia.atomiclms.com/courses/1/pages/1-dot-1-experiential-learning-definitions?module_item..." target="" data-api-endpoint="https://virginia.atomiclms.com/api/v1/courses/1/pages/1-dot-1-experiential-learning-definitions" data-api-returntype="Page"> <i class="icon-Line icon-arrow-open-start" style="vertical-align: bottom;"></i>Back to Lesson</a></p>