Before you begin, prepare the small image you want to use inline in documentation:

• Use your graphics utility of choice to create a screen capture, and crop appropriately.
• Final size should be 20x20px -- or smaller. Too large an image will disrupt the line spacing of the paragraph.
• Upload the image to an appropriate folder in the Media Browser, such as "it.cornell Site Management" or the folder for the service you are documenting.
• Once it is in place, copy the URL of the image.

While editing a KB or other page in the CK Editor:

1. Select Source.
2. Scroll down in the source HTML to the spot where you would like to place the inline image.
3. Copy this snippet of HTML and insert it: <img style="vertical-align:middle;" src="[url]" height="18"> , where
   • [url] is the URL of the inline image you have uploaded;
   • height value is equal to or less than the inline image size;
   • [alt text] is optional alt text for the icon or button -- optional because inserted text might be awkward inline or read aloud to break up the flow of the content, and because it runs more of a risk than other images of being redundant to the procedure text;
   • 
4. Make sure there is a space (maybe even a non-breaking space,  ) before and after the inserted image tag.
5. Select Source to return to regular edit view. Note that there is still a quirky Drupal artifact. This is to be expected.
   1. 
6. Save the page.

7. Check that the result is what you wanted.