{"id":5248,"date":"2023-03-08T07:31:06","date_gmt":"2023-03-08T07:31:06","guid":{"rendered":"https:\/\/tasarlab.com\/htmlde-ikon-eklemenin-modern-yontemleri\/"},"modified":"2024-09-18T10:00:00","modified_gmt":"2024-09-18T10:00:00","slug":"modern-methods-for-adding-icons-in-html","status":"publish","type":"post","link":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/","title":{"rendered":"Modern Methods for Adding Icons in HTML"},"content":{"rendered":"

In recent years, the use of SVG (Scalable Vector Graphics) has been increasingly popular due to the advantages it offers. This vector image format takes up much less space than other formats like JPEG, PNG, and GIF. SVGs can be scaled without any quality loss and customized through CSS. Because of their small file size, they help web pages perform more efficiently, providing advantages in areas such as SEO (Search Engine Optimization) and user experience. With these features, SVG technology is becoming an essential part of design and development processes in software projects and can be used in front-end development through several different methods.<\/span><\/p>\n

In this article, we will explore the following methods for adding SVG icons in HTML:<\/span><\/p>\n

Method 1:<\/b> Adding a Background Image<\/span><\/p>\n

Method 2:<\/b> Adding Using the IMG Tag<\/span><\/p>\n

Method 3:<\/b> Embedding SVG Directly in HTML<\/span><\/p>\n

Method 4:<\/b> Adding a Font-Family<\/span><\/p>\n

How to Add SVG as a Background Image?<\/span><\/h2>\n

Adding SVGs as \u201cBackground Image\u201d is a modern method used in Bootstrap 5.0.\u00a0<\/span><\/p>\n

This involves using the \u201c::before\u201d pseudo-class of a span element to apply a background image in a 20px area. Doing so allows you to assign the same background image to all span elements.<\/span><\/p>\n

Here\u2019s an example using the span tag:<\/span><\/p>\n

Example Span <\/span><\/pre>\n
First, define the following code for the span tag in the style section. Since the default display property of the span tag is inline (\u201cdisplay:inline\u201d), we need to set it to \u201cdisplay:flex\u201d. The flex value will ensure that the \u201c::before\u201d pseudo-element and the span appear side by side. The \u201cgap:10px\u201d will create a 10px space between the \u201c::before\u201d pseudo-element and the span.<\/span><\/p>\n
span {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display: flex;\r\n       gap: 10px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0}<\/pre>\n
In the next step, let\u2019s define \u201c::before\u201d for the span. The following code will create a 20px space before the span. All left to do is add the SVG code to the \u201cbackground-image\u201d property.<\/span><\/p>\n
 \u00a0\u00a0span::before {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0content: \"\";\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background-image: ;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background-repeat: no-repeat;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background-size: contain;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 20px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 20px;\r\n}<\/pre>\n
For this process, we can use the following SVG graphic. To add the SVG code to the \u201cbackground-image\u201d property in CSS, you\u2019ll need to convert it into a DATA URI format. You can find many tools for this conversion by searching for \u201csvg to data image\u201d on search engines.<\/span><\/p>\n
keyboard_arrow_down<\/title><\/path><\/g><\/svg><\/pre>\n
\"\"<\/a><\/p>\n
Paste the SVG code into the \u201cInsert SVG\u201d field at the <\/span>URL encoder<\/span><\/a> for the SVG address. Then, copy the generated CSS code from the \u201cReady for CSS\u201d section and paste it into the relevant area in your CSS. <\/span><\/p>\n
The final version of your HTML file will look as follows.<\/span><\/p>\n
\r\n\r\n \r\n   \r\n   \r\n   \r\n   Document<\/title>\r\n <\/head>\r\n <body>\r\n   <span>Sample Span <\/span>\r\n   <style>\r\n     span {\r\n       display: flex;\r\n       gap: 10px;\r\n     }\r\n     span::before {\r\n       content: \"\";\r\n       background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Ekeyboard_arrow_down%3C\/title%3E%3Cg fill='none'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z' fill='%23212121'%3E%3C\/path%3E%3C\/g%3E%3C\/svg%3E\");\r\n       background-repeat: no-repeat;\r\n       background-size: contain;\r\n       width: 20px;\r\n       height: 20px;\r\n     }\r\n   <\/style>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">The appearance in the browser will look as follows.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\"><a href=\"http:\/\/tasarlab.local\/wp-content\/uploads\/2023\/03\/image2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3073 size-medium\" src=\"http:\/\/tasarlab.local\/wp-content\/uploads\/2023\/03\/image2-300x136.png\" alt=\"\" width=\"300\" height=\"136\" srcset=\"https:\/\/tasarlab.com\/wp-content\/uploads\/2023\/03\/image2-300x136.png 300w, https:\/\/tasarlab.com\/wp-content\/uploads\/2023\/03\/image2.png 338w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/span><\/h3>\n<h3><span style=\"font-weight: 400;\">What If We Want to Add a Hover Effect?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Let\u2019s add the necessary code to rotate the downward arrow icon to face upwards when the mouse hovers over the \u201cExample Span.\u201d <\/span><\/p>\n<p><span style=\"font-weight: 400;\">We can achieve this by applying the following code to change the direction of the \u201c::before\u201d pseudo-element by 180 degrees on hover.<\/span><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\"> \u00a0span:hover::before {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transform: rotate(180deg);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0}<\/pre>\n<p><a href=\"\/wp-content\/uploads\/2023\/03\/image3-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3086\" src=\"\/wp-content\/uploads\/2023\/03\/image3-1.png\" alt=\"\" width=\"307\" height=\"171\" srcset=\"https:\/\/tasarlab.com\/wp-content\/uploads\/2023\/03\/image3-1.png 307w, https:\/\/tasarlab.com\/wp-content\/uploads\/2023\/03\/image3-1-300x167.png 300w\" sizes=\"auto, (max-width: 307px) 100vw, 307px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">This way, we changed the direction of the icon with just the rotate command without needing a second SVG icon. Additionally, we applied a smooth transition animation using the transition property while rotating the icon upwards.<\/span><\/p>\n<p><a href=\"\/wp-content\/uploads\/2023\/03\/image5.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3078 size-full\" src=\"\/wp-content\/uploads\/2023\/03\/image5.gif\" alt=\"\" width=\"272\" height=\"225\" \/><\/a><\/p>\n<p>\u00a0<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">transition: .5s ease-in-out;<\/pre>\n<p><span style=\"font-weight: 400;\">The \u201cease-in\u201d effect creates a smooth transition only at the start, while \u201cease-out\u201d provides a smooth transition only at the end of the animation. \u201cEase-in-out\u201d applies a smooth transition effect at the beginning and the end. Since our animation is bidirectional, the \u201cease-in-out\u201d option creates a better experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When we add the \u201cease-in-out\u201d code, the final version of our HTML file will look like this.<\/span><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\"><!DOCTYPE html>\r\n\r\n<html lang=\"en\">\r\n\r\n\u00a0<head>\r\n\r\n\u00a0\u00a0\u00a0<meta charset=\"UTF-8\" \/>\r\n\r\n\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\r\n\r\n\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n\r\n\u00a0\u00a0\u00a0<title>Document<\/title>\r\n\r\n\u00a0<\/head>\r\n\r\n\u00a0<body>\r\n\r\n\u00a0\u00a0\u00a0<span>Sample Span <\/span>\r\n\r\n\u00a0\u00a0\u00a0<style>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0span {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display: flex;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0gap: 10px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0span::before {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0content: \"\";\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Ekeyboard_arrow_down%3C\/title%3E%3Cg fill='none'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z' fill='%23212121'%3E%3C\/path%3E%3C\/g%3E%3C\/svg%3E\");\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background-repeat: no-repeat;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background-size: contain;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 20px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 20px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transition: 0.5s ease-in-out;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0span:hover::before {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transform: rotate(180deg);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0<\/style>\r\n\r\n\u00a0<\/body>\r\n\r\n<\/html><\/pre>\n<h2><span style=\"font-weight: 400;\">How to Add SVG Using the IMG Tag?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Using the IMG tag to add SVG is a less preferred method. However, it can be used if there is no need for repeated usage in the HTML file. Here\u2019s how to include an SVG as an IMG tag. As you can see, it is similar to adding PNG or JPG files.<\/span><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\"><img src=\u201d.\/path\/icon.svg\u201d ><\/pre>\n<p><span style=\"font-weight: 400;\">In this case, it will look like the following:<\/span><\/p>\n<p><a href=\"\/wp-content\/uploads\/2023\/03\/image1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3080 size-full\" src=\"\/wp-content\/uploads\/2023\/03\/image1.png\" alt=\"\" width=\"246\" height=\"181\" \/><\/a><\/p>\n<h2><span style=\"font-weight: 400;\">How to Embed SVG Inline in HTML?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When we open our SVG image with a text editor or view the source code in a browser, we can see the SVG\u2019s code-based structure. We can then copy all the code from the SVG file and embed it directly into our HTML page.<\/span><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\"><!DOCTYPE html>\r\n\r\n<html lang=\"en\">\r\n\r\n\u00a0<head>\r\n\r\n\u00a0\u00a0\u00a0<meta charset=\"UTF-8\" \/>\r\n\r\n\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\r\n\r\n\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n\r\n\u00a0\u00a0\u00a0<title>Document<\/title>\r\n\r\n\u00a0<\/head>\r\n\r\n\u00a0<body>\r\n\r\n\u00a0\u00a0\u00a0<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><title>keyboard_arrow_down<\/title><g fill=\"none\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\" fill=\"#212121\"><\/path><\/g><\/svg>\r\n\r\n\u00a0<\/body>\r\n\r\n<\/html><\/pre>\n<p><span style=\"font-weight: 400;\">In this case, it will look like the following:<\/span><\/p>\n<h2><span style=\"font-weight: 400;\"><a href=\"\/wp-content\/uploads\/2023\/03\/image1-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3082\" src=\"\/wp-content\/uploads\/2023\/03\/image1-1.png\" alt=\"\" width=\"246\" height=\"181\" \/><\/a><\/span><\/h2>\n<h2><span style=\"font-weight: 400;\">How to Add SVG as a Font-Family?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">There are already SVG format icon libraries available for use if you want to use pre-made SVG icon sets like <\/span><a href=\"https:\/\/icons.getbootstrap.com\/\"><span style=\"font-weight: 400;\">Bootstrap Icons<\/span><\/a><span style=\"font-weight: 400;\"> or <\/span><a href=\"https:\/\/fontawesome.com\/\"><span style=\"font-weight: 400;\">Font Awesome<\/span><\/a><span style=\"font-weight: 400;\">. However, if you need to convert custom SVG designs into a font family, tools like Nucleo or Icomoon are required.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Among these, Nucleo is a popular choice among front-end developers due to its ease of use. Since creating a font family with Nucleo is a detailed process, it is covered in a separate guide.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For detailed instructions on converting SVGs into a font family using Nucleo, visit our guide on <\/span><a href=\"https:\/\/tasarlab.com\/nucleo-ile-font-dosyasi-olusturmak\/\"><span style=\"font-weight: 400;\">Creating Font Families with Nucleo<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><b>Note:<\/b><span style=\"font-weight: 400;\"> SVG files can include script commands, posing a risk of script injection. Therefore, allowing users to upload SVG files directly can be risky.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In recent years, the use of SVG (Scalable Vector Graphics) has been increasingly popular due to the advantages it offers. This vector image format takes up much less space than other formats like JPEG, PNG, and GIF. SVGs can be scaled without any quality loss and customized through CSS. Because of their small file size, […]<\/p>\n","protected":false},"author":7,"featured_media":3911,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[79],"tags":[89,90,91,83,92,93,94,95,96,97,98,99,100,101,102,103],"class_list":["post-5248","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","tag-background-image-en","tag-base64-en","tag-bootstrap-en","tag-css-en","tag-font-en","tag-font-family-en","tag-frontend-en","tag-hover-en","tag-icomoon-en","tag-icon-en","tag-nucleo-en","tag-svg-en","tag-tff-en","tag-transition-en","tag-url-encoder-en","tag-woff-en"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Modern Methods for Adding Icons in HTML - Tasarlab<\/title>\n<meta name=\"description\" content=\"Enhance your website with modern icon techniques. Learn how to add icons in HTML effectively to improve your site's design and usability.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Modern Methods for Adding Icons in HTML\" \/>\n<meta property=\"og:description\" content=\"Enhance your website with modern icon techniques. Learn how to add icons in HTML effectively to improve your site's design and usability.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Tasarlab\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/tasarlab\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-08T07:31:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-18T10:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tasarlab.com\/wp-content\/uploads\/2023\/03\/pexels-pixabay-256502-scaled-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1702\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Burak \u00d6zk\u0131ran\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Modern Methods for Adding Icons in HTML\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/tasarlab.com\/wp-content\/uploads\/2023\/03\/pexels-pixabay-256502-scaled-1.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@tasarlabcom\" \/>\n<meta name=\"twitter:site\" content=\"@tasarlabcom\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Burak \u00d6zk\u0131ran\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/modern-methods-for-adding-icons-in-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/modern-methods-for-adding-icons-in-html\\\/\"},\"author\":{\"name\":\"Burak \u00d6zk\u0131ran\",\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/#\\\/schema\\\/person\\\/4f34d3e378ac2e1722778d3f54a398fb\"},\"headline\":\"Modern Methods for Adding Icons in HTML\",\"datePublished\":\"2023-03-08T07:31:06+00:00\",\"dateModified\":\"2024-09-18T10:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/modern-methods-for-adding-icons-in-html\\\/\"},\"wordCount\":834,\"publisher\":{\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/modern-methods-for-adding-icons-in-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/tasarlab.com\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/pexels-pixabay-256502-scaled-1.jpg\",\"keywords\":[\"background-image\",\"base64\",\"bootstrap\",\"css\",\"font\",\"font-family\",\"frontend\",\"hover\",\"icomoon\",\"icon\",\"nucleo\",\"svg\",\"tff\",\"transition\",\"url-encoder\",\"woff\"],\"articleSection\":[\"Front-end\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/modern-methods-for-adding-icons-in-html\\\/\",\"url\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/modern-methods-for-adding-icons-in-html\\\/\",\"name\":\"Modern Methods for Adding Icons in HTML - Tasarlab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/modern-methods-for-adding-icons-in-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/modern-methods-for-adding-icons-in-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/tasarlab.com\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/pexels-pixabay-256502-scaled-1.jpg\",\"datePublished\":\"2023-03-08T07:31:06+00:00\",\"dateModified\":\"2024-09-18T10:00:00+00:00\",\"description\":\"Enhance your website with modern icon techniques. Learn how to add icons in HTML effectively to improve your site's design and usability.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/modern-methods-for-adding-icons-in-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/tasarlab.com\\\/en\\\/modern-methods-for-adding-icons-in-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/modern-methods-for-adding-icons-in-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/tasarlab.com\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/pexels-pixabay-256502-scaled-1.jpg\",\"contentUrl\":\"https:\\\/\\\/tasarlab.com\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/pexels-pixabay-256502-scaled-1.jpg\",\"width\":2560,\"height\":1702},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/modern-methods-for-adding-icons-in-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Modern Methods for Adding Icons in HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/\",\"name\":\"Tasarlab\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/#organization\",\"name\":\"Tasarlab\",\"url\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/tasarlab.com\\\/wp-content\\\/uploads\\\/tasarlab-og-image.png\",\"contentUrl\":\"https:\\\/\\\/tasarlab.com\\\/wp-content\\\/uploads\\\/tasarlab-og-image.png\",\"width\":1200,\"height\":630,\"caption\":\"Tasarlab\"},\"image\":{\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/tasarlab\\\/\",\"https:\\\/\\\/x.com\\\/tasarlabcom\",\"https:\\\/\\\/tr.linkedin.com\\\/company\\\/tasarlab\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/tasarlab.com\\\/en\\\/#\\\/schema\\\/person\\\/4f34d3e378ac2e1722778d3f54a398fb\",\"name\":\"Burak \u00d6zk\u0131ran\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a29c1f7ff77fdf7ea98e42f7cd066236f31a7b423d7d96b9516607384c8cabe0?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a29c1f7ff77fdf7ea98e42f7cd066236f31a7b423d7d96b9516607384c8cabe0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a29c1f7ff77fdf7ea98e42f7cd066236f31a7b423d7d96b9516607384c8cabe0?s=96&d=mm&r=g\",\"caption\":\"Burak \u00d6zk\u0131ran\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Modern Methods for Adding Icons in HTML - Tasarlab","description":"Enhance your website with modern icon techniques. Learn how to add icons in HTML effectively to improve your site's design and usability.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/","og_locale":"en_US","og_type":"article","og_title":"Modern Methods for Adding Icons in HTML","og_description":"Enhance your website with modern icon techniques. Learn how to add icons in HTML effectively to improve your site's design and usability.","og_url":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/","og_site_name":"Tasarlab","article_publisher":"https:\/\/www.facebook.com\/tasarlab\/","article_published_time":"2023-03-08T07:31:06+00:00","article_modified_time":"2024-09-18T10:00:00+00:00","og_image":[{"width":2560,"height":1702,"url":"https:\/\/tasarlab.com\/wp-content\/uploads\/2023\/03\/pexels-pixabay-256502-scaled-1.jpg","type":"image\/jpeg"}],"author":"Burak \u00d6zk\u0131ran","twitter_card":"summary_large_image","twitter_title":"Modern Methods for Adding Icons in HTML","twitter_image":"https:\/\/tasarlab.com\/wp-content\/uploads\/2023\/03\/pexels-pixabay-256502-scaled-1.jpg","twitter_creator":"@tasarlabcom","twitter_site":"@tasarlabcom","twitter_misc":{"Written by":"Burak \u00d6zk\u0131ran","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/#article","isPartOf":{"@id":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/"},"author":{"name":"Burak \u00d6zk\u0131ran","@id":"https:\/\/tasarlab.com\/en\/#\/schema\/person\/4f34d3e378ac2e1722778d3f54a398fb"},"headline":"Modern Methods for Adding Icons in HTML","datePublished":"2023-03-08T07:31:06+00:00","dateModified":"2024-09-18T10:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/"},"wordCount":834,"publisher":{"@id":"https:\/\/tasarlab.com\/en\/#organization"},"image":{"@id":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/tasarlab.com\/wp-content\/uploads\/2023\/03\/pexels-pixabay-256502-scaled-1.jpg","keywords":["background-image","base64","bootstrap","css","font","font-family","frontend","hover","icomoon","icon","nucleo","svg","tff","transition","url-encoder","woff"],"articleSection":["Front-end"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/","url":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/","name":"Modern Methods for Adding Icons in HTML - Tasarlab","isPartOf":{"@id":"https:\/\/tasarlab.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/#primaryimage"},"image":{"@id":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/tasarlab.com\/wp-content\/uploads\/2023\/03\/pexels-pixabay-256502-scaled-1.jpg","datePublished":"2023-03-08T07:31:06+00:00","dateModified":"2024-09-18T10:00:00+00:00","description":"Enhance your website with modern icon techniques. Learn how to add icons in HTML effectively to improve your site's design and usability.","breadcrumb":{"@id":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/#primaryimage","url":"https:\/\/tasarlab.com\/wp-content\/uploads\/2023\/03\/pexels-pixabay-256502-scaled-1.jpg","contentUrl":"https:\/\/tasarlab.com\/wp-content\/uploads\/2023\/03\/pexels-pixabay-256502-scaled-1.jpg","width":2560,"height":1702},{"@type":"BreadcrumbList","@id":"https:\/\/tasarlab.com\/en\/modern-methods-for-adding-icons-in-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/tasarlab.com\/en\/"},{"@type":"ListItem","position":2,"name":"Modern Methods for Adding Icons in HTML"}]},{"@type":"WebSite","@id":"https:\/\/tasarlab.com\/en\/#website","url":"https:\/\/tasarlab.com\/en\/","name":"Tasarlab","description":"","publisher":{"@id":"https:\/\/tasarlab.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tasarlab.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/tasarlab.com\/en\/#organization","name":"Tasarlab","url":"https:\/\/tasarlab.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tasarlab.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/tasarlab.com\/wp-content\/uploads\/tasarlab-og-image.png","contentUrl":"https:\/\/tasarlab.com\/wp-content\/uploads\/tasarlab-og-image.png","width":1200,"height":630,"caption":"Tasarlab"},"image":{"@id":"https:\/\/tasarlab.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/tasarlab\/","https:\/\/x.com\/tasarlabcom","https:\/\/tr.linkedin.com\/company\/tasarlab"]},{"@type":"Person","@id":"https:\/\/tasarlab.com\/en\/#\/schema\/person\/4f34d3e378ac2e1722778d3f54a398fb","name":"Burak \u00d6zk\u0131ran","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a29c1f7ff77fdf7ea98e42f7cd066236f31a7b423d7d96b9516607384c8cabe0?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a29c1f7ff77fdf7ea98e42f7cd066236f31a7b423d7d96b9516607384c8cabe0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a29c1f7ff77fdf7ea98e42f7cd066236f31a7b423d7d96b9516607384c8cabe0?s=96&d=mm&r=g","caption":"Burak \u00d6zk\u0131ran"}}]}},"_links":{"self":[{"href":"https:\/\/tasarlab.com\/en\/wp-json\/wp\/v2\/posts\/5248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tasarlab.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tasarlab.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tasarlab.com\/en\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/tasarlab.com\/en\/wp-json\/wp\/v2\/comments?post=5248"}],"version-history":[{"count":4,"href":"https:\/\/tasarlab.com\/en\/wp-json\/wp\/v2\/posts\/5248\/revisions"}],"predecessor-version":[{"id":5250,"href":"https:\/\/tasarlab.com\/en\/wp-json\/wp\/v2\/posts\/5248\/revisions\/5250"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tasarlab.com\/en\/wp-json\/wp\/v2\/media\/3911"}],"wp:attachment":[{"href":"https:\/\/tasarlab.com\/en\/wp-json\/wp\/v2\/media?parent=5248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tasarlab.com\/en\/wp-json\/wp\/v2\/categories?post=5248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tasarlab.com\/en\/wp-json\/wp\/v2\/tags?post=5248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}