{"id":87944,"date":"2025-04-03T15:13:10","date_gmt":"2025-04-03T08:13:10","guid":{"rendered":"https:\/\/itviecblog.uptech.vn\/?p=85611"},"modified":"2025-06-17T09:24:09","modified_gmt":"2025-06-17T02:24:09","slug":"icon-html","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/icon-html\/","title":{"rendered":"Icon HTML l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch ch\u00e8n icon v\u00e0o website t\u1eeb A-Z"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/icon-html\/#Tong_quan_ve_icon_HTML\" >T\u1ed5ng quan v\u1ec1 icon HTML\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/icon-html\/#3_cach_pho_bien_de_chen_icon_vao_trang_web_HTML\" >3 c\u00e1ch ph\u1ed5 bi\u1ebfn \u0111\u1ec3 ch\u00e8n icon v\u00e0o trang web HTML\u00a0\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/icon-html\/#Cach_tao_icon_button_tren_trang_web_HTML\" >C\u00e1ch t\u1ea1o icon button tr\u00ean trang web HTML\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/icon-html\/#Cach_them_icon_vao_thanh_tieu_de_cua_trang_web\" >C\u00e1ch th\u00eam icon v\u00e0o thanh ti\u00eau \u0111\u1ec1 c\u1ee7a trang web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/icon-html\/#Cau_hoi_thuong_gap_ve_icon_HTML\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 icon HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/icon-html\/#Tong_ket_ve_icon_HTML\" >T\u1ed5ng k\u1ebft v\u1ec1 icon HTML<\/a><\/li><\/ul><\/nav><\/div>\n<p><em><strong>Icon HTML l\u00e0 y\u1ebfu t\u1ed1 gi\u00fap website tr\u1edf n\u00ean tr\u1ef1c quan v\u00e0 thu h\u00fat h\u01a1n. V\u1edbi nhi\u1ec1u ph\u01b0\u01a1ng ph\u00e1p nh\u01b0 s\u1eed d\u1ee5ng Font Awesome, h\u00ecnh \u1ea3nh SVG hay Unicode, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng ch\u00e8n icon ph\u00f9 h\u1ee3p v\u1edbi n\u1ed9i dung trang web.<\/strong><\/em><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft sau \u0111\u00e2y \u0111\u1ec3 \u0111\u01b0\u1ee3c gi\u1ea3i \u0111\u00e1p chi ti\u1ebft h\u01a1n v\u1ec1:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Vai tr\u00f2 c\u1ee7a icon trong HTML<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch ch\u00e8n icon v\u00e0o trang web HTML b\u1eb1ng Font Awesome, Google Icons hay Bootstrap<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch t\u1ea1o n\u00fat icon tr\u00ean trang web<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch th\u00eam icon v\u00e0o thanh ti\u00eau \u0111\u1ec1 c\u1ee7a trang web HTML<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 icon HTML<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Tong_quan_ve_icon_HTML\"><\/span><b>T\u1ed5ng quan v\u1ec1 icon HTML\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Icon (Bi\u1ec3u t\u01b0\u1ee3ng) trong HTML \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 tr\u1ef1c quan h\u00f3a v\u00e0 truy\u1ec3n \u0111\u1ea1t th\u00f4ng tin, h\u01b0\u1edbng d\u1eabn ng\u01b0\u1eddi d\u00f9ng th\u1ef1c hi\u1ec7n h\u00e0nh \u0111\u1ed9ng, l\u00e0m n\u1ed5i b\u1eadt c\u00e1c ghi ch\u00fa quan tr\u1ecdng ho\u1eb7c th\u00eam c\u00e1c y\u1ebfu t\u1ed1 trang tr\u00ed v\u00e0o trang web.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00e1c bi\u1ec3u t\u01b0\u1ee3ng kh\u00f4ng ch\u1ec9 gi\u00fap t\u0103ng t\u00ednh th\u1ea9m m\u1ef9 m\u00e0 c\u00f2n c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. Tuy nhi\u00ean, n\u1ebfu bi\u1ec3u t\u01b0\u1ee3ng kh\u00f4ng r\u00f5 r\u00e0ng ho\u1eb7c kh\u00f4ng \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u00fang c\u00e1ch, ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 g\u1eb7p kh\u00f3 kh\u0103n trong vi\u1ec7c hi\u1ec3u v\u00e0 s\u1eed d\u1ee5ng ch\u00fang hi\u1ec7u qu\u1ea3.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_cach_pho_bien_de_chen_icon_vao_trang_web_HTML\"><\/span><b>3 c\u00e1ch ph\u1ed5 bi\u1ebfn \u0111\u1ec3 ch\u00e8n icon v\u00e0o trang web HTML\u00a0\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 ch\u00e8n icon v\u00e0o HTML, b\u1ea1n c\u00f3 th\u1ec3 th\u00eam t\u00ean c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng (icon) \u0111\u00f3 v\u00e0o b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed n\u00e0o c\u1ee7a HTML, th\u00f4ng th\u01b0\u1eddng l\u00e0 &lt;i&gt; v\u00e0 &lt;span&gt;.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00e1c th\u01b0 vi\u1ec7n icon ph\u1ed5 bi\u1ebfn hi\u1ec7n nay \u0111\u1ec1u cung c\u1ea5p bi\u1ec3u t\u01b0\u1ee3ng d\u1ea1ng vector, cho ph\u00e9p t\u00f9y ch\u1ec9nh b\u1eb1ng CSS (v\u1ec1 k\u00edch th\u01b0\u1edbc, m\u00e0u s\u1eafc, hi\u1ec7u \u1ee9ng b\u00f3ng \u0111\u1ed5, v.v.). L\u01b0u \u00fd l\u00e0 b\u1ea1n c\u1ea7n ph\u1ea3i nh\u00fang\/import th\u01b0 vi\u1ec7n icon tr\u01b0\u1edbc (qua CSS ho\u1eb7c JavaScript), sau \u0111\u00f3 ph\u1ea3i s\u1eed d\u1ee5ng \u0111\u00fang c\u00fa ph\u00e1p v\u00e0 class name theo quy \u0111\u1ecbnh c\u1ee7a t\u1eebng th\u01b0 vi\u1ec7n.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00f3 nhi\u1ec1u c\u00e1ch \u0111\u1ec3 ch\u00e8n icon v\u00e0o HTML, nh\u01b0ng ba ph\u01b0\u01a1ng ph\u00e1p ph\u1ed5 bi\u1ebfn nh\u1ea5t l\u00e0 s\u1eed d\u1ee5ng Font Awesome, Bootstrap Icons v\u00e0 Google Icons.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">H\u00e3y c\u00f9ng ITviec t\u00ecm hi\u1ec3u chi ti\u1ebft t\u1eebng c\u00e1ch ch\u00e8n icon v\u00e0o trang web HTML d\u01b0\u1edbi \u0111\u00e2y!<\/span><\/p>\n<h3><b>Ch\u00e8n icon b\u1eb1ng Font Awesome<\/b><\/h3>\n<p><a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Font Awesome<\/span><\/a><span style=\"font-weight: 400;\"> l\u00e0 th\u01b0 vi\u1ec7n icon ph\u1ed5 bi\u1ebfn, h\u1ed7 tr\u1ee3 \u0111a d\u1ea1ng bi\u1ec3u t\u01b0\u1ee3ng \u0111\u1eb9p m\u1eaft v\u00e0 d\u1ec5 s\u1eed d\u1ee5ng. \u0110\u1ec3 s\u1eed d\u1ee5ng c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng c\u1ee7a Font Awesome, b\u1ea1n c\u00f3 th\u1ec3 truy c\u1eadp trang web ch\u00ednh th\u1ee9c v\u00e0 \u0111\u0103ng nh\u1eadp \u0111\u1ec3 nh\u1eadn m\u00e3 s\u1eed d\u1ee5ng.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 th\u1ef1c hi\u1ec7n ch\u00e8n icon v\u1edbi Font Awesome, b\u1ea1n c\u00f3 th\u1ec3 ch\u00e8n nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;title&gt;Font Awesome Icons&lt;\/title&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;link rel=\"stylesheet\" href=\"<\/span><span style=\"font-weight: 400;\">https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.7.2\/css\/all.min.css<\/span><span style=\"font-weight: 400;\">\" \/&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p&gt;C\u00e1c bi\u1ec3u t\u01b0\u1ee3ng tr\u00ean Font Awesome:&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"fas fa-band-aid\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"fas fa-cat\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"fas fa-dragon\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"far fa-clock\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"fas fa-clock\"&gt;&lt;\/i&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p&gt;\u0110\u1ecbnh d\u1ea1ng icon tr\u00ean Font Awesome (k\u00edch th\u01b0\u1edbc, m\u00e0u s\u1eafc v\u00e0 b\u00f3ng \u0111\u1ed5):&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"fas fa-clock\" style=\"font-size:24px;\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"fas fa-clock\" style=\"font-size:36px;\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"fas fa-clock\" style=\"font-size:48px;color:red;\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"fas fa-clock\" style=\"font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;\"&gt;&lt;\/i&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85616\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-1-vippro.jpg\" alt=\"icon html - itviec blog\" width=\"751\" height=\"295\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-1-vippro.jpg 751w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-1-vippro-300x118.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-1-vippro-640x251.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-1-vippro-200x79.jpg 200w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, c\u00f3 th\u1ec3 th\u1ea5y:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng c\u00e1c icon trong th\u01b0 vi\u1ec7n c\u1ee7a Font Awesome v\u1edbi b\u1eb1ng c\u00e1ch ch\u00e8n c\u00fa ph\u00e1p s\u1eed d\u1ee5ng cdn t\u1eeb b\u00ean th\u1ee9 3:<\/span><\/li>\n<\/ul>\n<pre><span style=\"font-weight: 400;\">&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.7.2\/css\/all.min.css\" \/&gt;<\/span><\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ec3 th\u1ef1c hi\u1ec7n \u0111\u1ecbnh d\u1ea1ng icon, b\u1ea1n s\u1ebd c\u1ea7n s\u1eed d\u1ee5ng \u0111\u1ebfn c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a CSS nh\u01b0 font-size, color v\u00e0 text-shadow.\u00a0<\/span><\/li>\n<\/ul>\n<h3><b>Ch\u00e8n icon b\u1eb1ng Bootstrap<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00e1ch n\u00e0y ph\u00f9 h\u1ee3p khi b\u1ea1n \u0111\u00e3 s\u1eed d\u1ee5ng Bootstrap cho website. \u0110\u1ec3 s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n icon c\u1ee7a Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;title&gt;Bootstrap Icons&lt;\/title&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.2\/font\/bootstrap-icons.min.css\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;body class=\"container mt-4\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;p&gt;C\u00e1c bi\u1ec3u t\u01b0\u1ee3ng Bootstrap Icons hi\u1ec7n \u0111\u1ea1i:&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;i class=\"bi bi-cloud\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;i class=\"bi bi-x-circle\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;i class=\"bi bi-person\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;i class=\"bi bi-envelope\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;i class=\"bi bi-hand-thumbs-up\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;p class=\"mt-4\"&gt;\u0110\u1ecbnh d\u1ea1ng icon Bootstrap (k\u00edch th\u01b0\u1edbc, m\u00e0u s\u1eafc v\u00e0 b\u00f3ng \u0111\u1ed5):&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;i class=\"bi bi-cloud\" style=\"font-size:24px;\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;i class=\"bi bi-cloud\" style=\"font-size:36px;\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;i class=\"bi bi-cloud\" style=\"font-size:48px;color:red;\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;i class=\"bi bi-cloud\" style=\"font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;\"&gt;&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-85617 size-full\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-2-vippro-e1743667388433.jpg\" alt=\"icon html - itviec blog\" width=\"654\" height=\"274\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-2-vippro-e1743667388433.jpg 654w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-2-vippro-e1743667388433-300x126.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-2-vippro-e1743667388433-640x268.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-2-vippro-e1743667388433-200x84.jpg 200w\" sizes=\"auto, (max-width: 654px) 100vw, 654px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, c\u00f3 th\u1ec3 th\u1ea5y:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u1ea3i th\u01b0 vi\u1ec7n Bootstrap 3 bao g\u1ed3m glyphicons, m\u1ed9t t\u1eadp h\u1ee3p icon t\u00edch h\u1ee3p trong Bootstrap 3 qua th\u1ebb &lt;link rel=&#8221;stylesheet\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u01b0\u01a1ng t\u1ef1, \u0111\u1ecbnh d\u1ea1ng ki\u1ec3u c\u1ee7a icon b\u1eb1ng c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a CSS.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Tuy nhi\u00ean, Glyphicons ch\u1ec9 c\u00f3 trong Bootstrap 3, t\u1eeb Bootstrap 4 tr\u1edf \u0111i, b\u1ea1n c\u1ea7n d\u00f9ng Font Awesome ho\u1eb7c Bootstrap Icons thay th\u1ebf.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">N\u1ebfu c\u1ea7n nhi\u1ec1u icon h\u01a1n, n\u00ean d\u00f9ng Font Awesome ho\u1eb7c Google Material Icons.<\/span><\/li>\n<\/ul>\n<h3><b>Ch\u00e8n icon b\u1eb1ng Google<\/b><\/h3>\n<p><a href=\"https:\/\/fonts.google.com\/icons\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Google Icon<\/span><\/a><span style=\"font-weight: 400;\"> cung c\u1ea5p th\u01b0 vi\u1ec7n Material Icons v\u1edbi thi\u1ebft k\u1ebf \u0111\u01a1n gi\u1ea3n v\u00e0 hi\u1ec7n \u0111\u1ea1i. \u0110\u1ec3 s\u1eed d\u1ee5ng c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng c\u1ee7a Google, b\u1ea1n th\u1ef1c hi\u1ec7n nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;title&gt;Google Icons&lt;\/title&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p&gt;Some Google icons:&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"material-icons\"&gt;cloud&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"material-icons\"&gt;favorite&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"material-icons\"&gt;attachment&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"material-icons\"&gt;computer&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"material-icons\"&gt;traffic&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;br&gt;&lt;br&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p&gt;Styled Google icons (size, color, and shadow):&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"material-icons\" style=\"font-size:24px;\"&gt;cloud&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"material-icons\" style=\"font-size:36px;\"&gt;cloud&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"material-icons\" style=\"font-size:48px;color:red;\"&gt;cloud&lt;\/i&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"material-icons\" style=\"font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;\"&gt;cloud&lt;\/i&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/html&gt;\u00a0<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb cho \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85618\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-3-vippro.jpg\" alt=\"icon html - itviec blog\" width=\"670\" height=\"327\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-3-vippro.jpg 670w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-3-vippro-300x146.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-3-vippro-640x312.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-3-vippro-200x98.jpg 200w\" sizes=\"auto, (max-width: 670px) 100vw, 670px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, c\u00f3 th\u1ec3 th\u1ea5y:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u1ea3i th\u01b0 vi\u1ec7n Google Material Icons t\u1eeb Google Fonts v\u00e0 c\u1ea7n khai b\u00e1o CSS class &#8220;material-icons&#8221; \u0111\u1ec3 s\u1eed d\u1ee5ng icon.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u01b0\u01a1ng t\u1ef1 t\u00f9y ch\u1ec9nh \u0111\u1ecbnh d\u1ea1ng v\u1edbi CSS.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ngo\u00e0i ra, th\u01b0 vi\u1ec7n icon c\u1ee7a Google t\u01b0\u01a1ng th\u00edch t\u1ed1t tr\u00ean t\u1ea5t c\u1ea3 tr\u00ecnh duy\u1ec7t.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">B\u00ean c\u1ea1nh \u0111\u00f3, Google c\u00f2n cung c\u1ea5p m\u1ed9t s\u1ed1 bi\u1ebfn th\u1ec3 kh\u00e1c c\u1ee7a Material Icons nh\u01b0 Outlined, Round, Sharp v\u00e0 Two-tone. \u0110\u1ec3 s\u1eed d\u1ee5ng c\u00e1c bi\u1ebfn th\u1ec3 n\u00e0y th\u00f4ng qua v\u00ed d\u1ee5 nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!-- Outlined --&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons+Outlined\" rel=\"stylesheet\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"material-icons-outlined\"&gt;cloud&lt;\/i&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;!-- Round --&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons+Round\" rel=\"stylesheet\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"material-icons-round\"&gt;cloud&lt;\/i&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;!-- Sharp --&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons+Sharp\" rel=\"stylesheet\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"material-icons-sharp\"&gt;cloud&lt;\/i&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;!-- Two Tone --&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons+Two+Tone\" rel=\"stylesheet\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;i class=\"material-icons-two-tone\"&gt;cloud&lt;\/i&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, Google \u0111\u00e3 ph\u00e1t tri\u1ec3n Material Symbols m\u1edbi h\u01a1n (b\u1ea3n c\u1eadp nh\u1eadt c\u1ee7a Material Icons) v\u1edbi nhi\u1ec1u t\u00f9y ch\u1ecdn h\u01a1n.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" \/&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;span class=\"material-symbols-outlined\"&gt;cloud&lt;\/span&gt;<\/span><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Cach_tao_icon_button_tren_trang_web_HTML\"><\/span><b>C\u00e1ch t\u1ea1o icon button tr\u00ean trang web HTML\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">T\u1ea1o v\u00e0 \u0111\u1ecbnh d\u1ea1ng icon button s\u1ebd gi\u00fap trang web tr\u1edf n\u00ean sinh \u0111\u1ed9ng v\u00e0 n\u00e2ng cao tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t h\u01a1n. \u0110\u1ec3 th\u1ef1c hi\u1ec7n \u0111\u1ecbnh d\u1ea1ng cho button, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh CSS theo quy tr\u00ecnh nh\u01b0 sau:<\/span><\/p>\n<h3><b>B\u01b0\u1edbc 1<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Th\u00eam th\u01b0 vi\u1ec7n bi\u1ec3u t\u01b0\u1ee3ng, ch\u1eb3ng h\u1ea1n nh\u01b0 Font Awesome v\u00e0 th\u00eam bi\u1ec3u t\u01b0\u1ee3ng v\u00e0o c\u00e1c n\u00fat HTML.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!-- Th\u00eam th\u01b0 vi\u1ec7n bi\u1ec3u t\u01b0\u1ee3ng --&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;!-- Th\u00eam bi\u1ec3u t\u01b0\u1ee3ng font awesome icons v\u00e0o button --&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;p&gt;Icon buttons:&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-home\"&gt;&lt;\/i&gt;&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-bars\"&gt;&lt;\/i&gt;&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-trash\"&gt;&lt;\/i&gt;&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-close\"&gt;&lt;\/i&gt;&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-folder\"&gt;&lt;\/i&gt;&lt;\/button&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p&gt;Bi\u1ec3u t\u01b0\u1ee3ng button v\u1edbi text:&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-home\"&gt;&lt;\/i&gt; Home&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-bars\"&gt;&lt;\/i&gt; Menu&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-trash\"&gt;&lt;\/i&gt; Trash&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-close\"&gt;&lt;\/i&gt; Close&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-folder\"&gt;&lt;\/i&gt; Folder&lt;\/button&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh icon HTML khi ch\u01b0a \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng v\u00e0 khi c\u00f3 text:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85619\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-4-vippro.jpg\" alt=\"icon html - itviec blog\" width=\"636\" height=\"226\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-4-vippro.jpg 636w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-4-vippro-300x107.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-4-vippro-200x71.jpg 200w\" sizes=\"auto, (max-width: 636px) 100vw, 636px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Sau \u0111\u00f3, b\u1ea1n ti\u1ebfn h\u00e0nh \u0111\u1ecbnh d\u1ea1ng cho c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng tr\u1edf n\u00ean sinh \u0111\u1ed9ng v\u00e0 ph\u00f9 h\u1ee3p v\u1edbi trang web h\u01a1n. B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o qua <\/span><a href=\"\/blog\/bang-mau-html\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">b\u1ea3ng m\u00e0u HTML<\/span><\/a> <span style=\"font-weight: 400;\">\u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng theo m\u00e0u s\u1eafc ph\u00f9 h\u1ee3p. V\u00ed d\u1ee5 ho\u00e0n ch\u1ec9nh v\u1ec1 c\u00e1ch t\u1ea1o button icon nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;!-- Add icon library --&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\n<span style=\"font-weight: 400;\">.btn {<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0<\/span><b>background-color: DodgerBlue;<\/b>\n<b> \u00a0border: none;<\/b>\n<b> \u00a0color: white;<\/b>\n<b> \u00a0padding: 12px 16px;<\/b>\n<b> \u00a0font-size: 16px;<\/b>\n<b> \u00a0cursor: pointer;<\/b>\n<span style=\"font-weight: 400;\">}<\/span>\n\n<b>\/* Darker background on mouse-over *\/<\/b>\n<b>.btn:hover {<\/b>\n<b> \u00a0background-color: RoyalBlue;<\/b>\n<span style=\"font-weight: 400;\">}<\/span>\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;h2&gt;Icon Buttons&lt;\/h2&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;p&gt;Icon buttons:&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-home\"&gt;&lt;\/i&gt;&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-bars\"&gt;&lt;\/i&gt;&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-trash\"&gt;&lt;\/i&gt;&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-close\"&gt;&lt;\/i&gt;&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-folder\"&gt;&lt;\/i&gt;&lt;\/button&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p&gt;Icon buttons with text:&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-home\"&gt;&lt;\/i&gt; Home&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-bars\"&gt;&lt;\/i&gt; Menu&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-trash\"&gt;&lt;\/i&gt; Trash&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-close\"&gt;&lt;\/i&gt; Close&lt;\/button&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;button class=\"btn\"&gt;&lt;i class=\"fa fa-folder\"&gt;&lt;\/i&gt; Folder&lt;\/button&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 \u0111o\u1ea1n m\u00e3 ho\u00e0n ch\u1ec9nh:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85620\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-5-vippro.jpg\" alt=\"icon html - itviec blog\" width=\"775\" height=\"370\" \/><\/p>\n<blockquote><p><i><span style=\"font-weight: 400;\">Xem th\u00eam: <\/span><\/i><strong><a href=\"\/blog\/css-la-gi\/\"><i>CSS l\u00e0 g\u00ec? H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng CSS thi\u1ebft k\u1ebf web hi\u1ec7u qu\u1ea3<\/i><\/a><\/strong><\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"Cach_them_icon_vao_thanh_tieu_de_cua_trang_web\"><\/span><b>C\u00e1ch th\u00eam icon v\u00e0o thanh ti\u00eau \u0111\u1ec1 c\u1ee7a trang web<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Ch\u00e8n <\/span><b>icon HTML<\/b><span style=\"font-weight: 400;\"> v\u00e0o thanh ti\u00eau \u0111\u1ec1 c\u1ee7a trang web s\u1ebd li\u00ean quan \u0111\u1ebfn vi\u1ec7c thi\u1ebft l\u1eadp m\u1ed9t favicon. Favicon l\u00e0 m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng nh\u1ecf hi\u1ec3n th\u1ecb trong tab tr\u00ecnh duy\u1ec7t b\u00ean c\u1ea1nh ti\u00eau \u0111\u1ec1 trang. \u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n b\u1eb1ng c\u00e1ch bao g\u1ed3m m\u1ed9t th\u1ebb &lt;link&gt; trong ph\u1ea7n &lt;head&gt; HTML v\u1edbi thu\u1ed9c t\u00ednh rel=&#8221;icon&#8221; tr\u1ecf \u0111\u1ebfn t\u1ec7p bi\u1ec3u t\u01b0\u1ee3ng.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85621\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-6-vippro.jpg\" alt=\"icon html - itviec blog\" width=\"1893\" height=\"535\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-6-vippro.jpg 1893w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-6-vippro-300x85.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-6-vippro-1536x434.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-6-vippro-200x57.jpg 200w\" sizes=\"auto, (max-width: 1893px) 100vw, 1893px\" \/><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh v\u00ed d\u1ee5 v\u1ec1 ch\u00e8n icon v\u00e0o thanh ti\u00eau \u0111\u1ec1 tr\u00ean trang web.<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 th\u00eam favicon, b\u1ea1n h\u00e3y s\u1eed d\u1ee5ng c\u00fa ph\u00e1p trong ph\u1ea7n &lt;head&gt; c\u1ee7a file HTML:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;link rel=\"icon\" href=\"icon_path\" type=\"image\/icon type\"&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: V\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y s\u1ebd tr\u00ecnh b\u00e0y c\u00e1ch th\u00eam favicon v\u00e0o trang web c\u1ee7a b\u1ea1n b\u1eb1ng c\u00e1ch \u0111\u01b0a c\u00fa ph\u00e1p th\u00edch h\u1ee3p v\u00e0o th\u1ebb &lt;head&gt; c\u1ee7a file HTML.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;meta charset=\"utf-8\" \/&gt;<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;title&gt;ITviec icon&lt;\/title&gt;<\/span>\n\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;!-- add icon link --&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;link rel=\"icon\" href=<\/span>\n<span style=\"font-weight: 400;\">\"https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png\"<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=\"image\/x-icon\" \/&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;h1 style=\"color: black\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ITviec<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/h1&gt;<\/span>\n\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;p&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ITviec icon \u0111\u01b0\u1ee3c th\u00eam tr\u00ean thanh ti\u00eau \u0111\u1ec1<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85622\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-7-vippro.jpg\" alt=\"icon html - itviec blog\" width=\"694\" height=\"154\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_icon_HTML\"><\/span><b>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 icon HTML<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc icon trong HTML?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a icon trong HTML b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng CSS nh\u01b0 sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">V\u1edbi Font Awesome, d\u00f9ng thu\u1ed9c t\u00ednh font-size.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">V\u1edbi SVG, thay \u0111\u1ed5i thu\u1ed9c t\u00ednh width v\u00e0 height.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">V\u1edbi h\u00ecnh \u1ea3nh, d\u00f9ng width v\u00e0 height trong CSS ho\u1eb7c HTML.<\/span><\/li>\n<\/ul>\n<h3><b>Font Awesome c\u00f3 mi\u1ec5n ph\u00ed kh\u00f4ng?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Font Awesome cung c\u1ea5p c\u1ea3 phi\u00ean b\u1ea3n mi\u1ec5n ph\u00ed v\u00e0 tr\u1ea3 ph\u00ed. Phi\u00ean b\u1ea3n mi\u1ec5n ph\u00ed bao g\u1ed3m nhi\u1ec1u icon ph\u1ed5 bi\u1ebfn, nh\u01b0ng n\u1ebfu b\u1ea1n mu\u1ed1n d\u00f9ng c\u00e1c icon \u0111\u1ed9c quy\u1ec1n ho\u1eb7c t\u00f9y ch\u1ec9nh chuy\u00ean nghi\u1ec7p h\u01a1n, b\u1ea1n c\u1ea7n \u0111\u0103ng k\u00fd g\u00f3i Pro c\u1ee7a Font Awesome. B\u1ea1n c\u00f3 th\u1ec3 t\u1ea3i v\u00e0 s\u1eed d\u1ee5ng Font Awesome mi\u1ec5n ph\u00ed t\u1ea1i trang web ch\u00ednh th\u1ee9c.<\/span><\/p>\n<h3><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 th\u00eam icon v\u00e0o thanh ti\u00eau \u0111\u1ec1 tr\u00ean HTML?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 th\u1ef1c hi\u1ec7n ch\u00e8n icon v\u00e0o ti\u00eau \u0111\u1ec1, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng favicon b\u1eb1ng c\u00e1ch ch\u00e8n v\u00e0o &lt;head&gt; c\u1ee7a trang HTML. V\u1edbi c\u00e1ch n\u00e0y, favicon s\u1ebd xu\u1ea5t hi\u1ec7n nh\u01b0 m\u1ed9t icon tr\u00ean tab tr\u00ecnh duy\u1ec7t, gi\u00fap trang web chuy\u00ean nghi\u1ec7p v\u00e0 \u1ea5n t\u01b0\u1ee3ng h\u01a1n.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;link rel=\"icon\" href=\"favicon.ico\" type=\"image\/icon type\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span><\/pre>\n<h3><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 th\u00eam icon v\u00e0o HTML ho\u1eb7c CSS?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00f3 nhi\u1ec1u c\u00e1ch \u0111\u1ec3 th\u00eam icon v\u00e0o HTML ho\u1eb7c CSS, t\u00f9y v\u00e0o nhu c\u1ea7u v\u00e0 m\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng ph\u01b0\u01a1ng ph\u00e1p th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng nh\u01b0:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>S\u1eed d\u1ee5ng Font Awesome ho\u1eb7c Bootstrap Icons: <\/b><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 ch\u00e8n icon nhanh ch\u00f3ng b\u1eb1ng c\u00e1ch th\u00eam m\u1ed9t class v\u00e0o th\u1ebb &lt;i&gt; ho\u1eb7c &lt;span&gt;. \u01afu \u0111i\u1ec3m c\u1ee7a ph\u01b0\u01a1ng ph\u00e1p n\u00e0y l\u00e0 th\u01b0 vi\u1ec7n icon c\u00f3 s\u1eb5n, c\u00f3 th\u1ec3 h\u1ed7 tr\u1ee3 t\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc v\u00e0 k\u00edch th\u01b0\u1edbc b\u1eb1ng CSS.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>S\u1eed d\u1ee5ng Google Material Icons:<\/b><span style=\"font-weight: 400;\"> Google cung c\u1ea5p b\u1ed9 icon mi\u1ec5n ph\u00ed c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u00edch h\u1ee3p v\u00e0o trang web. Khi s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n icon c\u1ee7a Google, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc ho\u1eb7c k\u00edch th\u01b0\u1edbc c\u1ee7a icon b\u1eb1ng CSS.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>D\u00f9ng h\u00ecnh \u1ea3nh l\u00e0m icon b\u1eb1ng CSS:<\/b><span style=\"font-weight: 400;\"> N\u1ebfu b\u1ea1n c\u00f3 icon ri\u00eang d\u01b0\u1edbi d\u1ea1ng PNG ho\u1eb7c SVG, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng CSS \u0111\u1ec3 hi\u1ec3n th\u1ecb ch\u00fang tr\u00ean tr\u00ecnh duy\u1ec7t. C\u00e1ch n\u00e0y s\u1ebd ph\u00f9 h\u1ee3p khi s\u1eed d\u1ee5ng icon thi\u1ebft k\u1ebf ri\u00eang, kh\u00f4ng ph\u1ee5 thu\u1ed9c v\u00e0o th\u01b0 vi\u1ec7n b\u00ean ngo\u00e0i.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket_ve_icon_HTML\"><\/span><b>T\u1ed5ng k\u1ebft v\u1ec1 icon HTML<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><b>Icon HTML<\/b><span style=\"font-weight: 400;\"> l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 gi\u00fap cho website tr\u1edf n\u00ean sinh \u0111\u1ed9ng v\u00e0 d\u1ec5 \u0111i\u1ec1u h\u01b0\u1edbng h\u01a1n. B\u1ea1n c\u00f3 th\u1ec3 l\u1ef1a ch\u1ecdn th\u00eam icon HTML b\u1eb1ng nhi\u1ec1u c\u00e1ch nh\u01b0 Font Awesome, SVG hay Unicode. Vi\u1ec7c s\u1eed d\u1ee5ng icon \u0111\u00fang c\u00e1ch s\u1ebd gi\u00fap c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng v\u00e0 t\u1ed1i \u01b0u trang web hi\u1ec7u qu\u1ea3.\u00a0<\/span><\/p>\n<blockquote><p><i><span style=\"font-weight: 400;\">Xem th\u00eam: <\/span><\/i><strong><a href=\"\/blog\/html-la-gi\/\"><i>Gi\u1ea3i \u0111\u00e1p \u201ct\u1ea5t t\u1ea7n t\u1eadt\u201d nh\u1eefng \u0111i\u1ec1u c\u1ea7n bi\u1ebft v\u1ec1 HTML<\/i><\/a><\/strong><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Icon HTML l\u00e0 y\u1ebfu t\u1ed1 gi\u00fap website tr\u1edf n\u00ean tr\u1ef1c quan v\u00e0 thu h\u00fat h\u01a1n. V\u1edbi nhi\u1ec1u ph\u01b0\u01a1ng ph\u00e1p nh\u01b0 s\u1eed d\u1ee5ng Font Awesome, h\u00ecnh \u1ea3nh SVG hay Unicode, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng ch\u00e8n icon ph\u00f9 h\u1ee3p v\u1edbi n\u1ed9i dung trang web. \u0110\u1ecdc b\u00e0i vi\u1ebft sau \u0111\u00e2y \u0111\u1ec3 \u0111\u01b0\u1ee3c gi\u1ea3i \u0111\u00e1p chi ti\u1ebft h\u01a1n [&hellip;]<\/p>\n","protected":false},"author":207,"featured_media":85623,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-87944","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Icon HTML l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch ch\u00e8n icon v\u00e0o website t\u1eeb A-Z - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Icon HTML gi\u00fap trang web tr\u1ef1c quan v\u00e0 thu h\u00fat h\u01a1n. T\u00ecm hi\u1ec3u ngay c\u00e1c c\u00e1ch ch\u00e8n icon HTML hi\u1ec7u qu\u1ea3, t\u1eeb c\u00e1c d\u1ea1ng font icon \u0111\u1ebfn h\u00ecnh \u1ea3nh SVG.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/icon-html\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Icon HTML l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch ch\u00e8n icon v\u00e0o website t\u1eeb A-Z\" \/>\n<meta property=\"og:description\" content=\"Icon HTML l\u00e0 y\u1ebfu t\u1ed1 gi\u00fap website tr\u1edf n\u00ean tr\u1ef1c quan v\u00e0 thu h\u00fat h\u01a1n. V\u1edbi nhi\u1ec1u ph\u01b0\u01a1ng ph\u00e1p nh\u01b0 s\u1eed d\u1ee5ng Font Awesome, h\u00ecnh \u1ea3nh SVG hay Unicode, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/icon-html\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-03T08:13:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-17T02:24:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-vippro-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"337\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Uyen Ngo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Uyen Ngo\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Icon HTML l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch ch\u00e8n icon v\u00e0o website t\u1eeb A-Z - ITviec Blog","description":"Icon HTML gi\u00fap trang web tr\u1ef1c quan v\u00e0 thu h\u00fat h\u01a1n. T\u00ecm hi\u1ec3u ngay c\u00e1c c\u00e1ch ch\u00e8n icon HTML hi\u1ec7u qu\u1ea3, t\u1eeb c\u00e1c d\u1ea1ng font icon \u0111\u1ebfn h\u00ecnh \u1ea3nh SVG.","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:\/\/itviec.com\/blog\/icon-html\/","og_locale":"vi_VN","og_type":"article","og_title":"Icon HTML l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch ch\u00e8n icon v\u00e0o website t\u1eeb A-Z","og_description":"Icon HTML l\u00e0 y\u1ebfu t\u1ed1 gi\u00fap website tr\u1edf n\u00ean tr\u1ef1c quan v\u00e0 thu h\u00fat h\u01a1n. V\u1edbi nhi\u1ec1u ph\u01b0\u01a1ng ph\u00e1p nh\u01b0 s\u1eed d\u1ee5ng Font Awesome, h\u00ecnh \u1ea3nh SVG hay Unicode, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5","og_url":"https:\/\/itviec.com\/blog\/icon-html\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-04-03T08:13:10+00:00","article_modified_time":"2025-06-17T02:24:09+00:00","og_image":[{"width":640,"height":337,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-vippro-scaled.png","type":"image\/png"}],"author":"Uyen Ngo","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Uyen Ngo","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"10 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/icon-html\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/icon-html\/"},"author":{"name":"Uyen Ngo","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20"},"headline":"Icon HTML l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch ch\u00e8n icon v\u00e0o website t\u1eeb A-Z","datePublished":"2025-04-03T08:13:10+00:00","dateModified":"2025-06-17T02:24:09+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/icon-html\/"},"wordCount":2178,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/icon-html\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-vippro-scaled.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/icon-html\/","url":"https:\/\/itviec.com\/blog\/icon-html\/","name":"Icon HTML l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch ch\u00e8n icon v\u00e0o website t\u1eeb A-Z - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/icon-html\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/icon-html\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-vippro-scaled.png","datePublished":"2025-04-03T08:13:10+00:00","dateModified":"2025-06-17T02:24:09+00:00","description":"Icon HTML gi\u00fap trang web tr\u1ef1c quan v\u00e0 thu h\u00fat h\u01a1n. T\u00ecm hi\u1ec3u ngay c\u00e1c c\u00e1ch ch\u00e8n icon HTML hi\u1ec7u qu\u1ea3, t\u1eeb c\u00e1c d\u1ea1ng font icon \u0111\u1ebfn h\u00ecnh \u1ea3nh SVG.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/icon-html\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/icon-html\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/icon-html\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-vippro-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/icon-html-vippro-scaled.png","width":640,"height":337,"caption":"icon html - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/icon-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Icon HTML l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch ch\u00e8n icon v\u00e0o website t\u1eeb A-Z"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20","name":"Uyen Ngo","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","caption":"Uyen Ngo"},"url":"https:\/\/itviec.com\/blog\/author\/uyen-ngo\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/87944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/207"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=87944"}],"version-history":[{"count":1,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/87944\/revisions"}],"predecessor-version":[{"id":88171,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/87944\/revisions\/88171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/85623"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=87944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=87944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=87944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}