{"id":85854,"date":"2025-04-12T20:55:17","date_gmt":"2025-04-12T13:55:17","guid":{"rendered":"https:\/\/itviecblog.uptech.vn\/?p=85854"},"modified":"2025-06-17T09:38:57","modified_gmt":"2025-06-17T02:38:57","slug":"bootstrap-icon-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/","title":{"rendered":"Bootstrap Icon: C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 trong d\u1ef1 \u00e1n web"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 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\/bootstrap-icon-la-gi\/#Tong_quan_ve_thu_vien_Bootstrap_Icon\" >T\u1ed5ng quan v\u1ec1 th\u01b0 vi\u1ec7n Bootstrap Icon\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\/bootstrap-icon-la-gi\/#Tai_sao_nen_su_dung_Bootstrap_Icon\" >T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng Bootstrap Icon?<\/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\/bootstrap-icon-la-gi\/#Cach_cai_dat_Bootstrap_Icon\" >C\u00e1ch c\u00e0i \u0111\u1eb7t Bootstrap Icon<\/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\/bootstrap-icon-la-gi\/#Vi_du_cach_su_dung_Bootstrap_Icon_trong_du_an\" >V\u00ed d\u1ee5 c\u00e1ch s\u1eed d\u1ee5ng Bootstrap Icon trong d\u1ef1 \u00e1n<\/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\/bootstrap-icon-la-gi\/#Vi_du_cach_su_dung_SVG_truc_tiep_tu_Bootstrap_Icon\" >V\u00ed d\u1ee5 c\u00e1ch s\u1eed d\u1ee5ng SVG tr\u1ef1c ti\u1ebfp t\u1eeb Bootstrap Icon<\/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\/bootstrap-icon-la-gi\/#Vi_du_cach_tuy_chinh_icon_trong_Bootstrap\" >V\u00ed d\u1ee5 c\u00e1ch t\u00f9y ch\u1ec9nh icon trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/#Mot_so_luu_y_khi_su_dung_Bootstrap_Icon\" >M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Bootstrap Icon<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/#So_sanh_Bootstrap_Icon_va_FontAwesome\" >So s\u00e1nh Bootstrap Icon v\u00e0 FontAwesome<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/#Cau_hoi_thuong_gap_ve_Bootstrap_icon\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Bootstrap icon<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n<p><em><strong>Trong l\u0129nh v\u1ef1c ph\u00e1t tri\u1ec3n giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, vi\u1ec7c s\u1eed d\u1ee5ng c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng (icons) kh\u00f4ng ch\u1ec9 gi\u00fap t\u0103ng t\u00ednh tr\u1ef1c quan m\u00e0 c\u00f2n g\u00f3p ph\u1ea7n t\u1ea1o n\u00ean tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t h\u01a1n. Bootstrap Icon &#8211; th\u01b0 vi\u1ec7n icon ch\u00ednh th\u1ee9c \u0111\u01b0\u1ee3c ra m\u1eaft n\u0103m 2020 &#8211; l\u00e0 m\u1ed9t trong nh\u1eefng c\u00f4ng c\u1ee5 \u0111\u01a1n gi\u1ea3n nh\u01b0ng hi\u1ec7u qu\u1ea3 \u0111\u1ec3 l\u00e0m \u0111i\u1ec1u \u0111\u00f3.\u00a0<\/strong><\/em><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Bootstrap icon l\u00e0 g\u00ec?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n Bootstrap Icon v\u00e0o d\u1ef1 \u00e1n c\u1ee7a b\u1ea1n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng icon trong Bootstrap\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">So s\u00e1nh Bootstrap Icon v\u00e0 FontAwesome<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Tong_quan_ve_thu_vien_Bootstrap_Icon\"><\/span><b>T\u1ed5ng quan v\u1ec1 th\u01b0 vi\u1ec7n Bootstrap Icon\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Bootstrap Icon l\u00e0 th\u01b0 vi\u1ec7n icon (bi\u1ec3u t\u01b0\u1ee3ng) d\u1ea1ng vector (<\/span><a href=\"https:\/\/vi.wikipedia.org\/wiki\/SVG\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">SVG<\/span><\/a><span style=\"font-weight: 400;\">) m\u00e3 ngu\u1ed3n m\u1edf, \u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n b\u1edfi nh\u00f3m t\u00e1c gi\u1ea3 c\u1ee7a Bootstrap v\u00e0 ra m\u1eaft ch\u00ednh th\u1ee9c v\u00e0o n\u0103m 2020 &#8211; \u0111\u00e1nh d\u1ea5u l\u1ea7n \u0111\u1ea7u ti\u00ean Bootstrap c\u00f3 m\u1ed9t th\u01b0 vi\u1ec7n bi\u1ec3u t\u01b0\u1ee3ng ri\u00eang bi\u1ec7t. Bootstrap Icon \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 \u0111\u1ed3ng b\u1ed9 v\u1edbi Bootstrap 5.<\/span><\/p>\n<blockquote><p><em>\u0110\u1ecdc th\u00eam: <a href=\"\/blog\/bootstrap-5-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>Bootstrap 5 l\u00e0 g\u00ec? Nh\u1eefng thay \u0111\u1ed5i n\u1ed5i b\u1eadt \u1edf Bootstrap 5<\/strong><\/a><\/em><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">Hi\u1ec7n nay, tr\u1ea3i qua nhi\u1ec1u \u0111\u1ee3t c\u1eadp nh\u1eadt, Bootstrap Icon s\u1edf h\u1eefu kho\u1ea3ng 1.800 bi\u1ec3u t\u01b0\u1ee3ng bao ph\u1ee7 nhi\u1ec1u l\u0129nh v\u1ef1c UI ph\u1ed5 bi\u1ebfn nh\u01b0 navigation, media, form, social, commerce. Trang ch\u1ee7 ch\u00ednh th\u1ee9c c\u1ee7a Bootstrap Icon: <\/span><a href=\"https:\/\/icons.getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">https:\/\/icons.getbootstrap.com\/<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><b><\/b><\/p>\n<p><span style=\"font-weight: 400;\">Tr\u01b0\u1edbc \u0111\u00e2y \u1edf Bootstrap 3, ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng <\/span><a href=\"https:\/\/www.glyphicons.com\/\" target=\"_blank\" rel=\"noopener\"><b>Glyphicons<\/b><\/a><span style=\"font-weight: 400;\"> \u2013 m\u1ed9t b\u1ed9 icon mi\u1ec5n ph\u00ed \u0111i k\u00e8m s\u1eb5n trong framework. B\u1ea1n ch\u1ec9 c\u1ea7n th\u00eam class nh\u01b0 <\/span><span style=\"font-weight: 400;\">glyphicon glyphicon-search<\/span><span style=\"font-weight: 400;\"> l\u00e0 c\u00f3 ngay icon.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tuy nhi\u00ean, \u0111\u1ebfn Bootstrap 4, \u0111\u1ed9i ng\u0169 ph\u00e1t tri\u1ec3n \u0111\u00e3 lo\u1ea1i b\u1ecf ho\u00e0n to\u00e0n Glyphicons ra kh\u1ecfi core. L\u00fd do l\u00e0 \u0111\u1ec3 l\u00e0m framework nh\u1eb9 h\u01a1n v\u00e0 gi\u00fap cho ng\u01b0\u1eddi d\u00f9ng linh ho\u1ea1t trong vi\u1ec7c ch\u1ecdn th\u01b0 vi\u1ec7n icon ri\u00eang (<\/span><a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">FontAwesome<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/feathericons.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Feather<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/ionic.io\/ionicons\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Ionicons<\/span><\/a><span style=\"font-weight: 400;\">,&#8230;), nh\u01b0ng c\u0169ng khi\u1ebfn vi\u1ec7c \u0111\u1ed3ng b\u1ed9 gi\u1eefa giao di\u1ec7n Bootstrap v\u00e0 c\u00e1c th\u01b0 vi\u1ec7n icon b\u00ean ngo\u00e0i \u0111\u00f4i khi kh\u00f4ng c\u00f2n li\u1ec1n m\u1ea1ch.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ec v\u1eady trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n Bootstrap 5, \u0111\u1ed9i ng\u0169 ph\u00e1t tri\u1ec3n \u0111\u00e3 quy\u1ebft \u0111\u1ecbnh t\u1ef1 x\u00e2y d\u1ef1ng m\u1ed9t th\u01b0 vi\u1ec7n icon d\u00e0nh ri\u00eang cho Bootstrap, gi\u00fap t\u0103ng kh\u1ea3 n\u0103ng t\u01b0\u01a1ng th\u00edch v\u1edbi giao di\u1ec7n v\u00e0 thi\u1ebft k\u1ebf c\u1ee7a Bootstrap.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85936\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-1-vippro.jpg\" alt=\"bootstrap icon - itviec blog\" width=\"1600\" height=\"805\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-1-vippro.jpg 1600w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-1-vippro-300x151.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-1-vippro-1536x773.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-1-vippro-200x101.jpg 200w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh m\u1ed9t s\u1ed1 icon trong Boostap Icons.<\/span><\/em><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tai_sao_nen_su_dung_Bootstrap_Icon\"><\/span><b>T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng Bootstrap Icon?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u1ed1i \u01b0u cho Bootstrap<\/b><span style=\"font-weight: 400;\">: Bootstrap Icon \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 t\u01b0\u01a1ng th\u00edch tuy\u1ec7t \u0111\u1ed1i v\u1edbi c\u00e1c component c\u1ee7a Bootstrap.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Bi\u1ec3u t\u01b0\u1ee3ng d\u1ea1ng <\/b><b>SVG<\/b><b>:<\/b><span style=\"font-weight: 400;\"> D\u1ec5 t\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc, m\u00e0u s\u1eafc, \u0111\u1ed9 d\u00e0y n\u00e9t ch\u1ec9 v\u1edbi CSS<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Nh\u1eb9, kh\u00f4ng ph\u1ee5 thu\u1ed9c JS:<\/b><span style=\"font-weight: 400;\"> Th\u01b0 vi\u1ec7n \u0111\u01b0\u1ee3c c\u00e0i \u0111\u1eb7t \u0111\u01a1n gi\u1ea3n v\u00e0 nhanh ch\u00f3ng \u0111\u1ec3 s\u1eed d\u1ee5ng<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>M\u00e3 ngu\u1ed3n m\u1edf (MIT License):<\/b><span style=\"font-weight: 400;\"> Bootstrap Icon l\u00e0 th\u01b0 vi\u1ec7n mi\u1ec5n ph\u00ed v\u00e0 cho ph\u00e9p t\u00f9y ch\u1ec9nh m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>D\u1ec5 t\u00ecm ki\u1ebfm v\u00e0 s\u1eed d\u1ee5ng icon:<\/b><span style=\"font-weight: 400;\"> Giao di\u1ec7n website \u1edf Bootstrap Icon c\u1ef1c th\u00e2n thi\u1ec7n v\u00e0 d\u1ec5 d\u00e0ng \u0111\u1ec3 c\u00f3 th\u1ec3 t\u00ecm ki\u1ebfm icon ph\u00f9 h\u1ee3p v\u1edbi m\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Cach_cai_dat_Bootstrap_Icon\"><\/span><b>C\u00e1ch c\u00e0i \u0111\u1eb7t Bootstrap Icon<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Bootstrap Icon \u0111\u01b0\u1ee3c ph\u00e1t h\u00e0nh tr\u00ean tr\u00ecnh qu\u1ea3n l\u00fd g\u00f3i <\/span><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">npm<\/span><\/a><span style=\"font-weight: 400;\">, nh\u01b0ng b\u1ea1n c\u00f3 th\u1ec3 c\u00e0i \u0111\u1eb7t n\u00f3 th\u00f4ng qua nhi\u1ec1u c\u00e1ch kh\u00e1c nhau bao g\u1ed3m:<\/span><\/p>\n<h3><b>Th\u00f4ng qua Tr\u00ecnh qu\u1ea3n l\u00fd g\u00f3i<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00e0i \u0111\u1eb7t Bootstrap Icon bao g\u1ed3m c\u00e1c t\u1ec7p SVG, sprite bi\u1ec3u t\u01b0\u1ee3ng v\u00e0 ph\u00f4ng ch\u1eef bi\u1ec3u t\u01b0\u1ee3ng b\u1eb1ng npm ho\u1eb7c Composer.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u1edbi npm:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">npm i bootstrap-icons<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">V\u1edbi composer:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">composer require twbs\/bootstrap-icons<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u01afu \u0111i\u1ec3m:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Qu\u1ea3n l\u00fd d\u1ec5 d\u00e0ng v\u00e0 t\u00edch h\u1ee3p t\u1ed1t trong d\u1ef1 \u00e1n s\u1eed d\u1ee5ng bundler nh\u01b0 Webpack, Vite, Laravel Mix, \u0111\u1ed3ng b\u1ed9 v\u1edbi c\u00e1c th\u01b0 vi\u1ec7n kh\u00e1c<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">D\u1ec5 c\u1eadp nh\u1eadt phi\u00ean b\u1ea3n m\u1edbi b\u1eb1ng l\u1ec7nh<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">H\u1ea1n ch\u1ebf ph\u1ee5 thu\u1ed9c v\u00e0o m\u1ea1ng (ch\u1ea1y offline v\u1eabn \u0111\u01b0\u1ee3c)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">\u0110i\u1ec1u n\u00e0y ph\u00f9 h\u1ee3p khi d\u1ef1 \u00e1n trung b\u00ecnh ho\u1eb7c l\u1edbn, c\u1ea7n qu\u1ea3n l\u00fd package v\u00e0 build t\u1ef1 \u0111\u1ed9ng.<\/span><\/p>\n<h3><b>Th\u00f4ng qua CDN<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">M\u1ed9t c\u00e1ch \u0111\u01a1n gi\u1ea3n v\u00e0 nhanh ch\u00f3ng \u0111\u1ec3 s\u1eed d\u1ee5ng Bootstrap Icon trong d\u1ef1 \u00e1n \u0111\u00f3 l\u00e0 s\u1eed d\u1ee5ng CDN. B\u1ea1n c\u00f3 th\u1ec3 nh\u00fang \u0111\u01b0\u1eddng d\u1eabn CDN CSS c\u1ee7a Bootstrap Icon v\u00e0o ph\u1ea7n &lt;head&gt; c\u1ee7a trang web nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">link<\/span><span style=\"font-weight: 400;\"> rel=<\/span><span style=\"font-weight: 400;\">\"stylesheet\"<\/span><span style=\"font-weight: 400;\"> href=<\/span><span style=\"font-weight: 400;\">\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Ho\u1eb7c s\u1eed d\u1ee5ng @import trong file CSS th\u00f4ng qua jsDelivr:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">@import url(\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\");<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u01afu \u0111i\u1ec3m:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ph\u01b0\u01a1ng ph\u00e1p c\u00e0i \u0111\u1eb7t c\u1ef1c nhanh, kh\u00f4ng c\u1ea7n build hay c\u00e0i \u0111\u1eb7t package manager<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">CDN gi\u00fap t\u1ea3i nhanh h\u01a1n v\u00ec c\u00f3 m\u00e1y ch\u1ee7 \u1edf nhi\u1ec1u n\u01a1i v\u00e0 cache tr\u00ean to\u00e0n c\u1ea7u<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Ph\u01b0\u01a1ng ph\u00e1p n\u00e0y ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c d\u1ef1 \u00e1n nh\u1ecf, d\u1ef1 \u00e1n c\u1ea7n ph\u00e1t tri\u1ec3n nhanh, ho\u1eb7c c\u1ea7n th\u1eed nghi\u1ec7m ch\u1ee9c n\u0103ng m\u00e0 kh\u00f4ng mu\u1ed1n c\u00e0i th\u00eam package.<\/span><\/p>\n<h3><b>Th\u00f4ng qua t\u1ea3i v\u1ec1 t\u1eadp tin<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 t\u1ea3i tr\u1ecdn b\u1ed9 Bootstrap Icon t\u1eeb GitHub (<\/span><a href=\"https:\/\/github.com\/twbs\/icons\/releases\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">t\u1ea1i \u0111\u00e2y<\/span><\/a><span style=\"font-weight: 400;\">), bao g\u1ed3m SVG, font, license, README v\u00e0 c\u1ea3 file package.json (c\u00e1c script npm \u0111i k\u00e8m ch\u1ee7 y\u1ebfu d\u00f9ng cho m\u1ee5c \u0111\u00edch ph\u00e1t tri\u1ec3n). Sau \u0111\u00f3 \u0111\u01b0a nh\u1eefng file n\u00e0y v\u00e0o d\u1ef1 \u00e1n web \u0111\u1ec3 s\u1eed d\u1ee5ng.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u01afu \u0111i\u1ec3m:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To\u00e0n quy\u1ec1n ki\u1ec3m so\u00e1t: kh\u00f4ng ph\u1ee5 thu\u1ed9c v\u00e0o m\u1ea1ng ho\u1eb7c CDN<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">D\u1ec5 d\u00e0ng tu\u1ef3 ch\u1ec9nh icon n\u1ebfu c\u1ea7n (c\u00f3 th\u1ec3 ch\u1ec9nh s\u1eeda SVG ho\u1eb7c CSS)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">D\u00f9ng \u0111\u01b0\u1ee3c khi kh\u00f4ng d\u00f9ng npm\/composer ho\u1eb7c khi c\u1ea7n deploy n\u1ed9i b\u1ed9 (intranet)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Ph\u00f9 h\u1ee3p cho d\u1ef1 \u00e1n n\u1ed9i b\u1ed9, c\u1ea7n b\u1ea3o m\u1eadt ho\u1eb7c kh\u00f4ng mu\u1ed1n ph\u1ee5 thu\u1ed9c m\u1ea1ng ngo\u00e0i v\u00e0 khi mu\u1ed1n tu\u1ef3 bi\u1ebfn icon theo \u00fd m\u00ecnh.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Vi_du_cach_su_dung_Bootstrap_Icon_trong_du_an\"><\/span><b>V\u00ed d\u1ee5 c\u00e1ch s\u1eed d\u1ee5ng Bootstrap Icon trong d\u1ef1 \u00e1n<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Sau khi \u0111\u00e3 th\u00eam Bootstrap Icon v\u00e0o d\u1ef1 \u00e1n (qua CDN, npm ho\u1eb7c t\u1ea3i tr\u1ef1c ti\u1ebfp), b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng icon b\u1eb1ng c\u00e1ch g\u1ecdi theo class t\u00ean c\u1ee7a icon.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>V\u00ed d\u1ee5 1:<\/strong> Ch\u00e8n icon v\u00e0o n\u00fat b\u1ea5m<\/span><\/p>\n<pre>&lt;button class=\"btn btn-primary\"&gt;\n\u00a0 &lt;i class=\"bi bi-download\"&gt;&lt;\/i&gt; T\u1ea3i xu\u1ed1ng\n&lt;\/button&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">button<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">&#8220;btn btn-primary&#8221;<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> T\u1ea1o n\u00fat theo theme m\u00e0u xanh trong Bootstrap.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">&#8220;bi bi-download&#8221;<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">\u00a0 D\u00f9ng th\u1ebb &lt;i&gt; \u0111\u1ec3 ch\u00e8n icon Bootstrap.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">bi<\/span><span style=\"font-weight: 400;\"> class chung c\u1ee7a Bootstrap Icon, <\/span><span style=\"font-weight: 400;\">bi-download<\/span><span style=\"font-weight: 400;\"> icon h\u00ecnh m\u0169i t\u00ean t\u1ea3i xu\u1ed1ng.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85938\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-2-vippro.png\" alt=\"bootstrap icon - itviec blog\" width=\"219\" height=\"83\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-2-vippro.png 219w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-2-vippro-200x76.png 200w\" sizes=\"auto, (max-width: 219px) 100vw, 219px\" \/><\/p>\n<p><span style=\"font-weight: 400;\"><strong>V\u00ed d\u1ee5 2:<\/strong> Icon trong input group<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"input-group mb-3\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0 &lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"input-group-text\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"bi bi-person\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0 &lt;<\/span><span style=\"font-weight: 400;\">input<\/span><span style=\"font-weight: 400;\"> type=<\/span><span style=\"font-weight: 400;\">\"text\"<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"form-control\"<\/span><span style=\"font-weight: 400;\"> placeholder=<\/span><span style=\"font-weight: 400;\">\"T\u00ean \u0111\u0103ng nh\u1eadp\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">&#8220;input-group mb-3&#8221;<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> T\u1ea1o m\u1ed9t nh\u00f3m input Bootstrap.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">&#8220;input-group-text&#8221;<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> Th\u00eam ph\u1ea7n t\u1eed hi\u1ec3n th\u1ecb tr\u01b0\u1edbc \u00f4 nh\u1eadp. B\u00ean trong c\u00f3 icon: <\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">&#8220;bi bi-person&#8221;<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> Icon h\u00ecnh ng\u01b0\u1eddi t\u1eeb Bootstrap Icon (bi-person).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">input<\/span><span style=\"font-weight: 400;\"> type=<\/span><span style=\"font-weight: 400;\">&#8220;text&#8221;<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">&#8220;form-control&#8221;<\/span><span style=\"font-weight: 400;\"> placeholder=<\/span><span style=\"font-weight: 400;\">&#8220;T\u00ean \u0111\u0103ng nh\u1eadp&#8221;<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> \u00d4 nh\u1eadp li\u1ec7u v\u1edbi placeholder &#8220;T\u00ean \u0111\u0103ng nh\u1eadp&#8221;.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85939\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-3-vippro.png\" alt=\"bootstrap icon - itviec blog\" width=\"488\" height=\"93\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-3-vippro.png 488w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-3-vippro-300x57.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-3-vippro-200x38.png 200w\" sizes=\"auto, (max-width: 488px) 100vw, 488px\" \/><\/p>\n<p><span style=\"font-weight: 400;\"><strong>V\u00ed d\u1ee5 3:<\/strong>\u00a0 S\u1eed d\u1ee5ng Icon \u0111\u1ed9c l\u1eadp c\u00f3 ch\u1ee9a tooltip<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"bi bi-info-circle\"<\/span><span style=\"font-weight: 400;\"> data-bs-toggle=<\/span><span style=\"font-weight: 400;\">\"tooltip\"<\/span><span style=\"font-weight: 400;\"> title=<\/span><span style=\"font-weight: 400;\">\"Th\u00f4ng tin chi ti\u1ebft\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">&#8220;bi bi-info-circle&#8221;<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"> Th\u1ebb icon, d\u00f9ng Bootstrap Icon.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">bi<\/span><span style=\"font-weight: 400;\"> class chung c\u1ee7a Bootstrap Icon. <\/span><span style=\"font-weight: 400;\">bi-info-circle<\/span><span style=\"font-weight: 400;\"> icon h\u00ecnh v\u00f2ng tr\u00f2n c\u00f3 ch\u1eef &#8220;i&#8221; (bi\u1ec3u t\u01b0\u1ee3ng th\u00f4ng tin).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">data-bs-toggle=&#8221;tooltip&#8221;<\/span><span style=\"font-weight: 400;\"> K\u00edch ho\u1ea1t tooltip c\u1ee7a Bootstrap.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">title=&#8221;Th\u00f4ng tin chi ti\u1ebft&#8221;<\/span><span style=\"font-weight: 400;\"> N\u1ed9i dung hi\u1ec3n th\u1ecb khi ng\u01b0\u1eddi d\u00f9ng di chu\u1ed9t v\u00e0o icon.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85940\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-4-vippro.jpg\" alt=\"bootstrap icon - itviec blog\" width=\"205\" height=\"88\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-4-vippro.jpg 205w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-4-vippro-200x86.jpg 200w\" sizes=\"auto, (max-width: 205px) 100vw, 205px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Vi_du_cach_su_dung_SVG_truc_tiep_tu_Bootstrap_Icon\"><\/span><b>V\u00ed d\u1ee5 c\u00e1ch s\u1eed d\u1ee5ng SVG tr\u1ef1c ti\u1ebfp t\u1eeb Bootstrap Icon<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Bootstrap Icon cung c\u1ea5p t\u1eadp tin SVG ri\u00eang cho t\u1eebng icon, gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng nh\u00fang tr\u1ef1c ti\u1ebfp v\u00e0o HTML ho\u1eb7c s\u1eed d\u1ee5ng nh\u01b0 \u1ea3nh t\u0129nh.<\/span><\/p>\n<h3><b>Nh\u00fang tr\u1ef1c ti\u1ebfp v\u00e0o HTML<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 copy m\u00e3 SVG t\u1eeb https:\/\/icons.getbootstrap.com v\u00e0 d\u00e1n th\u1eb3ng v\u00e0o n\u01a1i b\u1ea1n mu\u1ed1n hi\u1ec3n th\u1ecb icon<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">svg<\/span><span style=\"font-weight: 400;\"> xmlns=<\/span><span style=\"font-weight: 400;\">\"http:\/\/www.w3.org\/2000\/svg\"<\/span><span style=\"font-weight: 400;\"> width=<\/span><span style=\"font-weight: 400;\">\"16\"<\/span><span style=\"font-weight: 400;\"> height=<\/span><span style=\"font-weight: 400;\">\"16\"<\/span><span style=\"font-weight: 400;\"> fill=<\/span><span style=\"font-weight: 400;\">\"currentColor\"<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"bi bi-arrow-down-circle-fill\"<\/span><span style=\"font-weight: 400;\"> viewBox=<\/span><span style=\"font-weight: 400;\">\"0 0 16 16\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0 &lt;<\/span><span style=\"font-weight: 400;\">path<\/span><span style=\"font-weight: 400;\"> d=<\/span><span style=\"font-weight: 400;\">\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293z\"<\/span><span style=\"font-weight: 400;\">\/&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">svg<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85941\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-5-vippro.png\" alt=\"bootstrap icon - itviec blog\" width=\"658\" height=\"470\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-5-vippro.png 658w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-5-vippro-300x214.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-5-vippro-640x457.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-5-vippro-200x143.png 200w\" sizes=\"auto, (max-width: 658px) 100vw, 658px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">width, height: ki\u1ec3m so\u00e1t k\u00edch th\u01b0\u1edbc<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">fill=&#8221;currentColor&#8221;: cho ph\u00e9p \u0111\u1ed5i m\u00e0u qua CSS ho\u1eb7c class Bootstrap nh\u01b0 text-danger, text-primary&#8230;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">viewBox: b\u1eaft bu\u1ed9c \u0111\u1ec3 icon c\u00f3 th\u1ec3 responsive<\/span><\/li>\n<\/ul>\n<h3><b>D\u00f9ng nh\u01b0 h\u00ecnh \u1ea3nh b\u00ean ngo\u00e0i (external image)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">T\u1ea3i icon SVG v\u1ec1 m\u00e1y v\u00e0 d\u00f9ng nh\u01b0 \u1ea3nh b\u00ecnh th\u01b0\u1eddng. C\u00e1ch n\u00e0y tuy \u0111\u01a1n gi\u1ea3n nh\u01b0ng s\u1ebd kh\u00f4ng \u0111\u1ed5i m\u00e0u \u0111\u01b0\u1ee3c b\u1eb1ng CSS kh\u00f4ng thi\u1ebft l\u1eadp fill=&#8221;currentColor\u201d.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">img<\/span><span style=\"font-weight: 400;\"> src=<\/span><span style=\"font-weight: 400;\">\"\/icons\/heart-fill.svg\"<\/span><span style=\"font-weight: 400;\"> width=<\/span><span style=\"font-weight: 400;\">\"32\"<\/span><span style=\"font-weight: 400;\"> height=<\/span><span style=\"font-weight: 400;\">\"32\"<\/span><span style=\"font-weight: 400;\"> alt=<\/span><span style=\"font-weight: 400;\">\"Heart Icon\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Vi_du_cach_tuy_chinh_icon_trong_Bootstrap\"><\/span><b>V\u00ed d\u1ee5 c\u00e1ch t\u00f9y ch\u1ec9nh icon trong Bootstrap<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">V\u00ec Bootstrap Icon s\u1eed d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng SVG, n\u00ean b\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh \u0111\u1ecbnh d\u1ea1ng theo nhi\u1ec1u c\u00e1ch kh\u00e1c nhau t\u00f9y v\u00e0o c\u1ea5u tr\u00fac c\u1ee7a d\u1ef1 \u00e1n. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng CSS \u0111\u1ec3 c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh thu\u1ed9c t\u00ednh v\u00e0 hi\u1ec7u \u1ee9ng c\u1ee7a icon:<\/span><\/p>\n<h3><strong>T\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc v\u00e0 m\u00e0u s\u1eafc b\u1eb1ng thu\u1ed9c t\u00ednh style<\/strong><\/h3>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"bi bi-alarm\"<\/span><span style=\"font-weight: 400;\"> style=<\/span><span style=\"font-weight: 400;\">\"font-size: 2rem; color: #0d6efd;\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<h3><strong>T\u00f9y ch\u1ec9nh b\u1eb1ng class c\u00f3 s\u1eb5n c\u1ee7a Bootstrap<\/strong><\/h3>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"bi bi-exclamation-circle text-danger fs-3\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Mot_so_luu_y_khi_su_dung_Bootstrap_Icon\"><\/span><b>M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Bootstrap Icon<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">M\u1eb7c d\u00f9 Bootstrap Icon d\u1ec5 s\u1eed d\u1ee5ng, nh\u01b0ng b\u1ea1n c\u0169ng c\u1ea7n l\u01b0u \u00fd m\u1ed9t s\u1ed1 v\u1ea5n \u0111\u1ec1 \u0111\u1ec3 c\u00f3 th\u1ec3 d\u00f9ng th\u01b0 vi\u1ec7n hi\u1ec7u qu\u1ea3 h\u01a1n:<\/span><\/p>\n<ul>\n<li><b>S\u1eed d\u1ee5ng fill=&#8221;currentColor&#8221; khi mu\u1ed1n thay \u0111\u1ed5i m\u00e0u:<\/b><span style=\"font-weight: 400;\"> Khi b\u1ea1n ch\u00e8n SVG tr\u1ef1c ti\u1ebfp, h\u00e3y \u0111\u1ea3m b\u1ea3o icon c\u00f3 thu\u1ed9c t\u00ednh fill=&#8221;currentColor&#8221; \u0111\u1ec3 c\u00f3 th\u1ec3 thay \u0111\u1ed5i m\u00e0u b\u1eb1ng CSS ho\u1eb7c c\u00e1c class nh\u01b0 text-primary, text-danger.<\/span><\/li>\n<li><b>\u0110\u1ea3m b\u1ea3o hi\u1ec7u su\u1ea5t c\u1ee7a trang web:<\/b><span style=\"font-weight: 400;\"> N\u1ebfu ch\u1ec9 s\u1eed d\u1ee5ng m\u1ed9t v\u00e0i bi\u1ec3u t\u01b0\u1ee3ng, b\u1ea1n h\u00e3y c\u00e2n nh\u1eafc vi\u1ec7c nh\u00fang SVG thay v\u00ec t\u1ea3i to\u00e0n b\u1ed9 th\u01b0 vi\u1ec7n font \u0111\u1ec3 gi\u1ea3m dung l\u01b0\u1ee3ng t\u1ea3i trang.<\/span><\/li>\n<li><b>Kh\u00f4ng d\u00f9ng aria-hidden=\u201ctrue\u201d cho icon mang n\u1ed9i dung: <\/b><span style=\"font-weight: 400;\">N\u1ebfu icon ch\u1ec9 mang t\u00ednh trang tr\u00ed, b\u1ea1n n\u00ean th\u00eam aria-hidden=&#8221;true&#8221; \u0111\u1ec3 tr\u00e1nh g\u00e2y nhi\u1ec5u cho tr\u00ecnh \u0111\u1ecdc m\u00e0n h\u00ecnh. Ng\u01b0\u1ee3c l\u1ea1i, n\u1ebfu icon l\u00e0 n\u1ed9i dung ch\u00ednh (v\u00ed d\u1ee5 trong n\u00fat ho\u1eb7c li\u00ean k\u1ebft), b\u1ea1n c\u1ea7n cung c\u1ea5p m\u00f4 t\u1ea3 thay th\u1ebf. V\u00ed d\u1ee5: <\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">&#8220;bi-trash&#8221;<\/span><span style=\"font-weight: 400;\"> aria-label=<\/span><span style=\"font-weight: 400;\">&#8220;X\u00f3a&#8221;<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/li>\n<li><b>Tr\u00e1nh l\u1ea1m d\u1ee5ng qu\u00e1 nhi\u1ec1u icon: <\/b><span style=\"font-weight: 400;\">Icon gi\u00fap t\u0103ng t\u00ednh tr\u1ef1c quan, nh\u01b0ng n\u1ebfu d\u00f9ng qu\u00e1 nhi\u1ec1u s\u1ebd g\u00e2y r\u1ed1i m\u1eaft ho\u1eb7c \u1ea3nh h\u01b0\u1edfng hi\u1ec7u su\u1ea5t t\u1ea3i trang, nh\u1ea5t l\u00e0 n\u1ebfu b\u1ea1n nh\u00fang nhi\u1ec1u icon SVG l\u1edbn.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"So_sanh_Bootstrap_Icon_va_FontAwesome\"><\/span><b>So s\u00e1nh Bootstrap Icon v\u00e0 FontAwesome<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">C\u1ea3 Bootstrap Icon v\u00e0 FontAwesome \u0111\u1ec1u l\u00e0 hai th\u01b0 vi\u1ec7n icon ph\u1ed5 bi\u1ebfn v\u00e0 m\u1ea1nh m\u1ebd, nh\u01b0ng ch\u00fang c\u00f3 s\u1ef1 kh\u00e1c bi\u1ec7t r\u00f5 r\u1ec7t v\u1ec1 c\u00e1ch d\u00f9ng, phong c\u00e1ch thi\u1ebft k\u1ebf v\u00e0 kh\u1ea3 n\u0103ng m\u1edf r\u1ed9ng. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 b\u1ea3ng so s\u00e1nh chi ti\u1ebft gi\u1eefa hai th\u01b0 vi\u1ec7n n\u00e0y:<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Ti\u00eau ch\u00ed<\/b><\/td>\n<td><b>Bootstrap Icon<\/b><\/td>\n<td><b>FontAwesome<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Nh\u00e0 ph\u00e1t h\u00e0nh<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Nh\u00f3m ph\u00e1t tri\u1ec3n c\u1ee7a Bootstrap<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Ph\u00e1t tri\u1ec3n b\u1edfi FontAwesome Inc.<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>S\u1ed1 l\u01b0\u1ee3ng icon<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Kho\u1ea3ng 2000 icon (mi\u1ec5n ph\u00ed ho\u00e0n to\u00e0n)<\/span><\/td>\n<td><span style=\"font-weight: 400;\">C\u00f3 h\u01a1n 30.000 icon (bao g\u1ed3m c\u1ea3 mi\u1ec5n ph\u00ed v\u00e0 tr\u1ea3 ph\u00ed trong phi\u00ean b\u1ea3n Pro). Phi\u00ean b\u1ea3n mi\u1ec5n ph\u00ed cung c\u1ea5p kho\u1ea3ng 2.000 icon<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>Ki\u1ec3u d\u00e1ng thi\u1ebft k\u1ebf<\/b><\/td>\n<td><span style=\"font-weight: 400;\">\u0110\u01a1n gi\u1ea3n, t\u1ed1i gi\u1ea3n, thi\u00ean v\u1ec1 outline<\/span><\/td>\n<td><span style=\"font-weight: 400;\">\u0110a d\u1ea1ng v\u1ec1 ki\u1ec3u d\u00e1ng: solid, regular, duotone, brands<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>Kh\u1ea3 n\u0103ng t\u01b0\u01a1ng th\u00edch v\u1edbi Bootstrap<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Tuy\u1ec7t \u0111\u1ed1i t\u01b0\u01a1ng th\u00edch<\/span><\/td>\n<td><span style=\"font-weight: 400;\">T\u01b0\u01a1ng th\u00edch t\u1ed1t, nh\u01b0ng kh\u00f4ng \u0111\u1ed3ng b\u1ed9 ho\u00e0n to\u00e0n<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>\u0110\u1ecbnh d\u1ea1ng<\/b><\/td>\n<td><span style=\"font-weight: 400;\">\u01afu ti\u00ean \u0111\u1ecbnh d\u1ea1ng SVG, ngo\u00e0i ra c\u00f2n c\u00f3 icon sprite v\u00e0 font<\/span><\/td>\n<td><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 c\u1ea3 ph\u00f4ng ch\u1eef web (Web Fonts) v\u00e0 SVG<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>K\u00edch th\u01b0\u1edbc t\u1eadp tin v\u00e0 hi\u1ec7u su\u1ea5t<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Nh\u1eb9 h\u01a1n, t\u1eadp tin font kho\u1ea3ng 100-200 KB.<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Phi\u00ean b\u1ea3n mi\u1ec5n ph\u00ed n\u1eb7ng h\u01a1n m\u1ed9t ch\u00fat (kho\u1ea3ng 300-400 KB cho font). Phi\u00ean b\u1ea3n Pro ho\u1eb7c t\u1ea3i to\u00e0n b\u1ed9 c\u00f3 th\u1ec3 l\u00ean \u0111\u1ebfn v\u00e0i MB n\u1ebfu kh\u00f4ng t\u1ed1i \u01b0u.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_Bootstrap_icon\"><\/span><b>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Bootstrap icon<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Bootstrap Icon m\u00e0 kh\u00f4ng c\u1ea7n Bootstrap framework kh\u00f4ng?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Bootstrap Icon l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n \u0111\u1ed9c l\u1eadp, \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 ho\u1ea1t \u0111\u1ed9ng ri\u00eang bi\u1ec7t, kh\u00f4ng ph\u1ee5 thu\u1ed9c v\u00e0o c\u00e1c th\u00e0nh ph\u1ea7n kh\u00e1c c\u1ee7a Bootstrap. V\u00ec v\u1eady b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Bootstrap icons m\u00e0 kh\u00f4ng c\u1ea7n Bootstrap (CSS\/JS).<\/span><\/p>\n<h3><b>Phi\u00ean b\u1ea3n m\u1edbi nh\u1ea5t c\u1ee7a Bootstrap Icon l\u00e0 g\u00ec?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Phi\u00ean b\u1ea3n m\u1edbi nh\u1ea5t c\u1ee7a Bootstrap Icon t\u1ea1i th\u1eddi \u0111i\u1ec3m vi\u1ebft b\u00e0i l\u00e0 v1.11.3, ph\u00e1t h\u00e0nh ng\u00e0y 03\/01\/2025. B\u1ea1n c\u00f3 th\u1ec3 theo d\u00f5i th\u00eam v\u1ec1 c\u00e1c phi\u00ean b\u1ea3n ph\u00e1t h\u00e0nh <\/span><a href=\"https:\/\/github.com\/twbs\/icons\/releases\/tag\/v1.11.3\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">t\u1ea1i \u0111\u00e2y<\/span><\/a>.<\/p>\n<h3><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 thay \u0111\u1ed5i \u0111\u1ecbnh d\u1ea1ng c\u1ee7a m\u1ed9t icon?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 thay \u0111\u1ed5i \u0111\u1ecbnh d\u1ea1ng c\u1ee7a m\u1ed9t Bootstrap icon, b\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc, m\u00e0u s\u1eafc, h\u01b0\u1edbng, ho\u1eb7c th\u1eadm ch\u00ed chuy\u1ec3n \u0111\u1ed5i gi\u1eefa c\u00e1c c\u00e1ch s\u1eed d\u1ee5ng (font ho\u1eb7c SVG). D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c c\u00e1ch th\u1ef1c hi\u1ec7n chi ti\u1ebft:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\"><strong>Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc<\/strong><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh font-size:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"bi-house\"<\/span><span style=\"font-weight: 400;\"> style=<\/span><span style=\"font-weight: 400;\">\"font-size: 32px;\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Ho\u1eb7c d\u00f9ng CSS:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">.bi-house {<\/span>\n<span style=\"font-weight: 400;\">\u00a0 font-size: 32px;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h4><strong>Thay \u0111\u1ed5i m\u00e0u s\u1eafc<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh color:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"bi-house\"<\/span><span style=\"font-weight: 400;\"> style=<\/span><span style=\"font-weight: 400;\">\"color: red;\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Ho\u1eb7c d\u00f9ng CSS:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">.bi-house {<\/span>\n<span style=\"font-weight: 400;\">\u00a0 color: red;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h4><strong>Xoay ho\u1eb7c l\u1eadt<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">D\u00f9ng thu\u1ed9c t\u00ednh transform trong style:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"bi-house\"<\/span><span style=\"font-weight: 400;\"> style=<\/span><span style=\"font-weight: 400;\">\"transform: rotate(45deg);\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">i<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Ho\u1eb7c d\u00f9ng CSS:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">.bi-house {<\/span>\n<span style=\"font-weight: 400;\">\u00a0 transform: scaleX(-1);<\/span>\n<span style=\"font-weight: 400;\">\u00a0 transform: scaleY(-1);<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><b>T\u1ed5ng k\u1ebft<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Bootstrap Icon l\u00e0 th\u01b0 vi\u1ec7n icon m\u00e3 ngu\u1ed3n m\u1edf do ch\u00ednh \u0111\u1ed9i ng\u0169 Bootstrap ph\u00e1t tri\u1ec3n. V\u1edbi \u01b0u \u0111i\u1ec3m nh\u1eb9, d\u1ec5 d\u00f9ng, v\u00e0 t\u01b0\u01a1ng th\u00edch t\u1ed1t v\u1edbi Bootstrap, Bootstrap Icon \u0111ang d\u1ea7n tr\u1edf th\u00e0nh l\u1ef1a ch\u1ecdn ph\u1ed5 bi\u1ebfn cho nhi\u1ec1u nh\u00e0 ph\u00e1t tri\u1ec3n. ITviec hi v\u1ecdng b\u00e0i vi\u1ebft n\u00e0y \u0111\u00e3 mang \u0111\u1ebfn cho b\u1ea1n \u0111\u1ecdc nh\u1eefng th\u00f4ng tin c\u1ea7n thi\u1ebft v\u1ec1 c\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n icon m\u1ea1nh m\u1ebd n\u00e0y.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong l\u0129nh v\u1ef1c ph\u00e1t tri\u1ec3n giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, vi\u1ec7c s\u1eed d\u1ee5ng c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng (icons) kh\u00f4ng ch\u1ec9 gi\u00fap t\u0103ng t\u00ednh tr\u1ef1c quan m\u00e0 c\u00f2n g\u00f3p ph\u1ea7n t\u1ea1o n\u00ean tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t h\u01a1n. Bootstrap Icon &#8211; th\u01b0 vi\u1ec7n icon ch\u00ednh th\u1ee9c \u0111\u01b0\u1ee3c ra m\u1eaft n\u0103m 2020 &#8211; l\u00e0 m\u1ed9t trong nh\u1eefng c\u00f4ng [&hellip;]<\/p>\n","protected":false},"author":218,"featured_media":85937,"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-85854","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.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Bootstrap Icon: C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 trong d\u1ef1 \u00e1n web - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Bootstrap Icon l\u00e0 g\u00ec? C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng icon trong d\u1ef1 \u00e1n web. So s\u00e1nh chi ti\u1ebft Bootstrap Icon vs FontAwesome.\" \/>\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\/bootstrap-icon-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Icon: C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 trong d\u1ef1 \u00e1n web\" \/>\n<meta property=\"og:description\" content=\"Trong l\u0129nh v\u1ef1c ph\u00e1t tri\u1ec3n giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, vi\u1ec7c s\u1eed d\u1ee5ng c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng (icons) kh\u00f4ng ch\u1ec9 gi\u00fap t\u0103ng t\u00ednh tr\u1ef1c quan m\u00e0 c\u00f2n g\u00f3p ph\u1ea7n t\u1ea1o n\u00ean tr\u1ea3i\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/\" \/>\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-12T13:55:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-17T02:38:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-vippro-scaled-1.jpg\" \/>\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\/jpeg\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\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=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bootstrap Icon: C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 trong d\u1ef1 \u00e1n web - ITviec Blog","description":"Bootstrap Icon l\u00e0 g\u00ec? C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng icon trong d\u1ef1 \u00e1n web. So s\u00e1nh chi ti\u1ebft Bootstrap Icon vs FontAwesome.","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\/bootstrap-icon-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Bootstrap Icon: C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 trong d\u1ef1 \u00e1n web","og_description":"Trong l\u0129nh v\u1ef1c ph\u00e1t tri\u1ec3n giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, vi\u1ec7c s\u1eed d\u1ee5ng c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng (icons) kh\u00f4ng ch\u1ec9 gi\u00fap t\u0103ng t\u00ednh tr\u1ef1c quan m\u00e0 c\u00f2n g\u00f3p ph\u1ea7n t\u1ea1o n\u00ean tr\u1ea3i","og_url":"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-04-12T13:55:17+00:00","article_modified_time":"2025-06-17T02:38:57+00:00","og_image":[{"width":640,"height":337,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-vippro-scaled-1.jpg","type":"image\/jpeg"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"12 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/b610b2614c1ef58f6bfccfe68242733c"},"headline":"Bootstrap Icon: C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 trong d\u1ef1 \u00e1n web","datePublished":"2025-04-12T13:55:17+00:00","dateModified":"2025-06-17T02:38:57+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/"},"wordCount":2870,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-vippro-scaled-1.jpg","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/","url":"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/","name":"Bootstrap Icon: C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 trong d\u1ef1 \u00e1n web - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-vippro-scaled-1.jpg","datePublished":"2025-04-12T13:55:17+00:00","dateModified":"2025-06-17T02:38:57+00:00","description":"Bootstrap Icon l\u00e0 g\u00ec? C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng icon trong d\u1ef1 \u00e1n web. So s\u00e1nh chi ti\u1ebft Bootstrap Icon vs FontAwesome.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-vippro-scaled-1.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/bootstrap-icon-vippro-scaled-1.jpg","width":640,"height":337},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/bootstrap-icon-la-gi\/#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":"Bootstrap Icon: C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 trong d\u1ef1 \u00e1n web"}]},{"@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\/b610b2614c1ef58f6bfccfe68242733c","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/85854","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\/218"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=85854"}],"version-history":[{"count":1,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/85854\/revisions"}],"predecessor-version":[{"id":88177,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/85854\/revisions\/88177"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/85937"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=85854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=85854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=85854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}