{"id":2655,"date":"2023-02-11T22:20:37","date_gmt":"2023-02-12T03:20:37","guid":{"rendered":"https:\/\/bostonianadam.com\/?p=2655"},"modified":"2023-02-11T22:22:54","modified_gmt":"2023-02-12T03:22:54","slug":"how-to-add-circle-border-around-bootstrap-icon","status":"publish","type":"post","link":"https:\/\/bostonianadam.com\/2023\/02\/how-to-add-circle-border-around-bootstrap-icon\/","title":{"rendered":"How to add a circle border around a Bootstrap icon"},"content":{"rendered":"\n

I previously blogged about how to add a circle border around a Font Awesome icon<\/a> back in 2019, but since then things have changed and Bootstrap<\/strong> now has their own icons, Bootstrap Icons<\/a>. Can that same code be used today for Bootstrap 5<\/strong> and their icons?<\/p>\n\n\n\n

The answer is pretty much, yes! The HTML and CSS code is identical with a few small edits. I made a few notes further down below about some changes to the CSS you can make. Please note that the below code is using Bootstrap 5.2.3<\/strong> and Bootstrap Icons 1.10.3<\/strong>, and it displays a blue building icon with a red circle around it. Obviously, you can change the colors to your liking.<\/p>\n\n\n\n

CSS Code<\/h3>\n\n\n\n
<!--Copy and paste inside the <head> tag-->\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65\" crossorigin=\"anonymous\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.10.3\/font\/bootstrap-icons.css\">\n\n<style>\n.icon-flex, .icon-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n.icon-wrapper {\n    border-radius: 50%;\n    overflow: hidden;\n    border: 1px solid red;\n    font-size: 5rem;\n    width: 8rem;\n    height: 8rem;\n}\n.icon-wrapper .bi {\n    color: blue;\n}\n<\/style><\/code><\/pre>\n\n\n\n
HTML Code<\/h3>\n\n\n\n
<!--Copy and paste inside the <body> tag-->\n<div class=\"icon-flex\">\n  <div class=\"icon-wrapper\"><i class=\"bi bi-building\"><\/i><\/div>\n<\/div>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK\/7HAuoJl+0I4\" crossorigin=\"anonymous\"><\/script><\/code><\/pre>\n\n\n\n
A few notes about my CSS code<\/h3>\n\n\n\n
    \n
  • In the “.icon-wrapper” class…\n
      \n
    • You can change the color and thickness of the border by editing the “border”<\/li>\n\n\n\n
    • You can change the size of the icon by editing the “font-size”<\/li>\n\n\n\n
    • You can change the size of the circle by editing the “width” and “height”<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • In the “.icon-wrapper .bi” class…\n
        \n
      • You can change the color of the icon by editing the “color”<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
        Please let me know your thoughts about this code and if you have a better or more efficient way to do this. Always feel free to share your knowledge and thank you for reading this blog post.<\/p>\n","protected":false},"excerpt":{"rendered":"
        I previously blogged about how to add a circle border around a Font Awesome icon back in 2019, but since then things have changed and Bootstrap now has their own icons, Bootstrap Icons. Can that same code be used today for Bootstrap 5 and their icons? The answer is pretty much, yes! The HTML and […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[64],"tags":[56,13,15,25,28,68,67],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts\/2655"}],"collection":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/comments?post=2655"}],"version-history":[{"count":2,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts\/2655\/revisions"}],"predecessor-version":[{"id":2670,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts\/2655\/revisions\/2670"}],"wp:attachment":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/media?parent=2655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/categories?post=2655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/tags?post=2655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}