Icons not centered

Jump to solution
HeideeVincent
Community Member
‎10-11-2022 04:37 PM

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>

Labels (1)
Labels
Preview file
21 KB
0 Likes
2 Solutions

Jump to solution
Chris_Hofer
Community Coach
Community Coach
‎10-12-2022 10:16 AM

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:

BackToLesson.png

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.

 

View solution in original post

Jump to solution
RichC
Community Participant
‎10-13-2022 05:33 AM

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>

View solution in original post