Heading with Hanging Indent?

[sjjorstad]

Hello,

How do I add a hanging indent to a HEADING that starts with an ICON formatted flush-left (see attachment)?

I realize I'm preaching to the choir here, but the ability to create good visual cues for learners is so fundamental and I'm struggling with this. The solution needs to be responsive for use on all common device screen sizes.

Thanks to anyone who has suggestion!

Sue

[thovey · Accepted solution]

@sjjorstad 

You could try to edit the HTML, so the <p> tag starts more like <p style="text-indent: 2em;">

You may want to refer to this guide for help with HTML.

You can submit feedback to Canvas by submitting a feature request.

@How do I create a new idea conversation in the Instructure Community?

[sjjorstad]

Hello, @thovey 

Thanks so much for the reply and suggestion!

Could you possibly tell me where to edit the HTML in the way you suggest, because Canvas does not create a  <p> tag when generating a level 3 heading in the Rich Content Editor. It's been awhile since I did coding/markup by hand.

Below is the markup for the heading in the .png image that I've used to demonstrate this issue, but I've also attached it as a .txt file.

<div id="kl_custom_block_6" class="">
<h3 class="m-0 font-3" style="color: #000000; border-top-color: #a2d063; border-bottom-color: #a2d063; padding-left: 10px;"><i class="fas fa-book-open" style="color: #ffffff; background-color: #557c44;" aria-hidden="true"><span class="dp-icon-content" style="display: none;">&nbsp;</span></i> Free state-of-the-art, web-based, standardized training that gives you the ability to learn at your own pace</h3>

Thanks so much for any advice you may have.

S