[{"data":1,"prerenderedAt":31},["Reactive",2],{"blog-post-using-icons-in-markdown":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":15,"related":16},"using-icons-in-markdown","How to Use Icons in Markdown - A Simple Guide","Discover how to enhance Markdown documents by adding icons for visual appeal and efficient communication, using FontAwesome, Material Icons, or emojis.","Icons are a great way to enhance your Markdown documents. They make your content engaging and visually appealing, and can also help to convey meanings more efficiently. In this tutorial, we will…","2024-07-18","Tutorial","Matthew Rathbone","Using icons in Markdown",2,"\u003Cp>Icons are a great way to enhance your Markdown documents. They make your content engaging and visually appealing, and can also help to convey meanings more efficiently. In this tutorial, we will walk you through how to use icons in Markdown.\u003C/p>\n\u003Ch3 id=\"markup-for-icons\">Markup for Icons\u003C/h3>\n\u003Cp>Markdown doesn't support icons out of the box. However, we can leverage web-based icon libraries like \u003Ca href=\"https://fontawesome.com/\">FontAwesome\u003C/a> or \u003Ca href=\"https://material.io/resources/icons\">Material Icons\u003C/a> to add icons in Markdown.\u003C/p>\n\u003Cp>To use icons from these libraries, you'll have to use HTML tags within your Markdown. While this is not pure Markdown anymore, it's important to note that most Markdown parsers, like the ones on GitHub, support a subset of HTML.\u003C/p>\n\u003Cp>Here is the basic syntax for adding a FontAwesome icon:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">i\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"fab fa-github"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">i\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>And for Material Icons:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">i\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"material-icons"\u003C/span>>\u003C/span>\u003C/span>face\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">i\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>The string after \u003Ccode>fa-\u003C/code> or inside \u003Ccode>material-icons\u003C/code> signifies the specific icon to use.\u003C/p>\n\u003Ch3 id=\"icons-in-headers-and-button-links\">Icons in Headers and Button Links\u003C/h3>\n\u003Cp>You can add icons to headers and hyperlink buttons for unique navigation elements.\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">i\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"fas fa-cog"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">i\u003C/span>>\u003C/span>\u003C/span> Configuration\u003C/span>\n[\u003Cspan class=\"hljs-string\">Visit Blog <i class="fas fa-external-link-alt"></i>\u003C/span>](\u003Cspan class=\"hljs-link\">https://blog.markdowntools.com/\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch3 id=\"icons-and-lists\">Icons and Lists\u003C/h3>\n\u003Cp>Incorporate icons in your lists to signify different item statuses or categories:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">i\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"fas fa-check"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">i\u003C/span>>\u003C/span>\u003C/span> Finished Items\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">i\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"fas fa-times"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">i\u003C/span>>\u003C/span>\u003C/span> Unfinished Items\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">i\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"fas fa-inbox"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">i\u003C/span>>\u003C/span>\u003C/span> Unassigned Items\n\u003C/code>\u003C/pre>\u003Ch3 id=\"using-emojis\">Using Emojis\u003C/h3>\n\u003Cp>Apart from using external libraries, you can use emojis to inject small, colorful, and appealing icons into your Markdown. Since emojis are unicode symbols, they can be inserted right into the text without needing to leverage embedded HTML:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-bullet\">-\u003C/span> :white\u003Cspan class=\"hljs-emphasis\">_check_\u003C/span>mark: Finished Items\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> :x: Unfinished Items\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> :inbox\u003Cspan class=\"hljs-emphasis\">_tray: Unassigned Items\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>The standard for using emojis in Markdown is to wrap the emoji's alias in colons. Visit the \u003Ca href=\"https://emojipedia.org/\">Emojipedia\u003C/a> for a vast list of available emojis.\u003C/p>\n\u003Cp>Please note, emojis rendering might differ based on the browser and platform.\u003C/p>\n\u003Ch3 id=\"pitfalls-and-caveats\">Pitfalls and Caveats\u003C/h3>\n\u003Cp>Remember, Markdown parsers might strip out or misinterpret the \u003Ccode><i>\u003C/code> tag, so we always recommend previewing the content before publishing it. Check out our guide on \u003Ca href=\"/blog/how-to-preview-rendered-markdown-in-vim\">How to Preview Rendered Markdown in Vim\u003C/a> to quickly view your rendered markdown during editing.\u003C/p>\n\u003Cp>Also, if you use Jekyll or other static site generators, make sure your Markdown engine is set to \u003Ccode>kramdown\u003C/code>, \u003Ccode>redcarpet\u003C/code>, or something similar that supports parsing inline HTML.\u003C/p>\n\u003Ch3 id=\"conclusion\">Conclusion\u003C/h3>\n\u003Cp>Using icons in Markdown is straightforward, but you should always verify how they appear in your specific Markdown renderer. Whether you're adding icons for an intuitive UI or expressive emojis for lively content, Markdown, combined with HTML, gives you flexibility and power to enhance your content and delight your readers.\u003C/p>\n",[],[],[17,24],{"slug":18,"title":19,"description":20,"excerpt":21,"date":22,"category":9,"author":10,"keywords":23,"readingMinutes":12},"iframe-in-markdown","Embed iFrame in Markdown - Simple Integration Guide","Learn how to embed an iFrame in markdown files, including GitHub Flavored Markdown and Jekyll, with our straightforward tutorial.","Markdown is a lightweight markup language used for formatting plain text. It's commonly utilized in applications where users may need to enter formatted text, yet it's crucial to maintain the text…","2024-07-19","iFrame in markdown",{"slug":25,"title":26,"description":27,"excerpt":28,"date":29,"category":9,"author":10,"keywords":30,"readingMinutes":12},"markdown-italics","Markdown Italics Tutorial: Simple Syntax Guide","Learn to emphasize text with italics in Markdown using asterisks and underscores. Simple tutorial for perfect italicized text.","Often in our writing, we need to emphasize certain words or phrases to draw attention to them. In typographic terms, one common way of doing this is by using italics.","2024-05-06","Markdown italics",1792184940616]