Added <doc.icon> tag

Added <doc.icon> tag for displaying icons in the middle of text.

Author: marcos4503

Documentation-Template/Documentation.html

@@ -91,6 +91,7 @@
                     <li class="summarySubItem">Highlighted Words</li>
                     <ul>
                         <li><a class="summaryItem" onclick="GoToDivSmoothly(this);" correspondentTopicId="12">How to highlight a word in the middle of a text</a></li>
+                        <li><a class="summaryItem" onclick="GoToDivSmoothly(this);" correspondentTopicId="12a">How to display a little Icon or minuscle Image in the middle of text</a></li>
                     </ul>
                     <li class="summarySubItem">Responsive Images</li>
                     <ul>
@@ -353,6 +354,21 @@
                 </doc.topic>
                 <!-- #endregion -->
 
+                <!-- #region How to display a little Icon or minuscle Image in the middle of text -->
+                <doc.topic topicid="12a">
+                    <doc.topictitle>How to display a little Icon or minuscle Image in the middle of text</doc.topictitle>
+
+                    In some situations, it may be necessary to display an icon, custom emote or maybe a tiny image in the middle of the text. For these cases, use the code below.
+                    <doc.code language="html"><code>
+This <doc.icon src="DocumentationFiles/images/some-icon.png"></doc.icon> icon is a PNG in the middle of the text.
+                    </code></doc.code>
+                    And this is the result...
+                    <br>
+                    <br>
+                    This <doc.icon src="DocumentationFiles/images/some-icon.png"></doc.icon> icon is a PNG in the middle of the text.
+                </doc.topic>
+                <!-- #endregion -->
+
                 <!-- #region Displaying a responsive image with zoom and caption controls -->
                 <doc.topic topicid="13">
                     <doc.topictitle>Displaying a responsive image with zoom and caption controls</doc.topictitle>

Documentation-Template/DocumentationFiles/css/all-css-content.css

@@ -19,6 +19,7 @@
 @import url(tool-tags-style/achiev.css);
 @import url(tool-tags-style/code.css);
 @import url(tool-tags-style/detach.css);
+@import url(tool-tags-style/icon.css);
 @import url(tool-tags-style/frame.css);
 @import url(tool-tags-style/image.css);
 @import url(tool-tags-style/info.css);

Documentation-Template/DocumentationFiles/css/tool-tags-style/icon.css

@@ -0,0 +1,13 @@
+.toolTagIcon{
+    display: inline;
+    background-color: transparent;
+    padding-left: 2px;
+    padding-right: 2px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.toolTagIcon img{
+    height: 16px;
+    width: auto;
+    margin-bottom: -3px;
+}

Documentation-Template/DocumentationFiles/images/some-icon.png

@@ -676,6 +676,15 @@ function RunPostProcessOfAllToolsTags() {
         currentItem.innerHTML = "<div class=\"toolTagDetach\">" + content + "</div>";
     }
 
+    //icon
+    temporaryTags = document.getElementsByTagName("doc.icon");
+    for (var i = 0; i < temporaryTags.length; i++) {
+        var currentItem = temporaryTags[i];
+        if (isInsideCodeTag(currentItem) == true) //<-- Ignore this item, if is inside of CODE tag
+            continue;
+        currentItem.innerHTML = "<div class=\"toolTagIcon\"><img src=\"" + currentItem.getAttribute("src") + "\" /></div>";
+    }
+
     //image
     temporaryTags = document.getElementsByTagName("doc.image");
     for (var i = 0; i < temporaryTags.length; i++) {