Bostonian Adam

Tag: Icons

  • How to add a circle border around a Bootstrap icon

    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 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 and Bootstrap Icons 1.10.3, and it displays a blue building icon with a red circle around it. Obviously, you can change the colors to your liking.

    CSS Code

    <!--Copy and paste inside the <head> tag-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

<style>
.icon-flex, .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-wrapper {
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid red;
    font-size: 5rem;
    width: 8rem;
    height: 8rem;
}
.icon-wrapper .bi {
    color: blue;
}
</style>

    HTML Code

    <!--Copy and paste inside the <body> tag-->
<div class="icon-flex">
  <div class="icon-wrapper"><i class="bi bi-building"></i></div>
</div>

<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>

    A few notes about my CSS code

    • In the “.icon-wrapper” class…
      • You can change the color and thickness of the border by editing the “border”
      • You can change the size of the icon by editing the “font-size”
      • You can change the size of the circle by editing the “width” and “height”
    • In the “.icon-wrapper .bi” class…
      • You can change the color of the icon by editing the “color”

    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.

  • Sharing resources and tech news – June 2022

    This will be a quick blog post where I wanted to share a few online resources and also discuss a few interesting articles with a brief summary and get your thoughts.

    Resources

    • AnimatiSS – A collection of CSS animations for your web projects. If you visit the website, click the “STYLES” button to see the different CSS animations you can choose from. (Credit goes to Ray Villalobos for sharing this link on LinkedIn)
    • Avataaars Generator – A free online avatar generator
    • Tabler Icons – A free open-source collection of icons to use for your website or app. (Credit goes to Ray Villalobos for sharing this link on LinkedIn)

    Adobe Photoshop

    Adobe is currently testing a free web version of its popular Photoshop software in Canada, where users can use its core functions. According to the article I read there is no timeline when the free web version will be available to other locations. This info was found in the article, Adobe plans to make Photoshop on the web free to everyone, on TheVerge.com.

    I personally think this is great, especially for those who have never used Adobe Photoshop before. I remember before my wife and I started paying for the Adobe Creative Cloud subscription, which includes Photoshop, we had to use free image editing software and I could never get use to the user interfaces, and they were missing features (or I couldn’t find them LOL) that Photoshop had. Also, the high price tag that Photoshop once had (before Creative Cloud) kept us away from it. Are you going to try out the free version of Photoshop or are you already paying for it with Adobe Creative Cloud?

    Google News

    Do you use Google News on your desktop? Well if you do, you most likely have seen an option to switch to the new look. The biggest change was moving the main categories from the left side of the page to across the top which I like. If you want to read more about this, check out the article, Google News gets more personal with desktop redesign, on TheVerge.com.

    Amazon Alexa

    Amazon is working on something creepy… they are developing a feature for Alexa which can emulate anyone’s voice. The article I read even suggests it could emulate a dead person’s voice. This info was found in the article, Amazon demonstrates Alexa mimicking the voice of a deceased relative, on CNBC.com.

    To me, this screams security concerns and ethically just wrong, but that’s just me. My wife and I don’t even have Amazon Alexa. What do you think of this? What benefits does this bring?

    If you made it all the way down here, thanks for checking out my blog post, I appreciate it. Stay safe and try to do everything in love, the world really needs it.

  • How to add a circle border around a Font Awesome icon

    I was recently working on building a webpage and I ran into an issue where I wanted to add a circular border around an icon. I was using Bootstrap 4 for the page’s layout and Font Awesome for the icons. I tried a few things with Bootstrap’s border utilities but it couldn’t do what I wanted, so I searched online.

    I was able to find this CodePen solution to my problem. I made some edits to the code for my webpage, which I have provided below.

    HTML Code

    <div class="icon-flex">
  <div class="icon-wrapper"><i class="far fa-user"></i></div>
</div>

    CSS Code

    .icon-flex, .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-wrapper {
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid blue;
    font-size: 3rem;
    width: 80px;
    height: 80px;
}
.icon-wrapper i {
    color: blue;
}

    Few notes about my CSS code

    • If you increase or decrease the “font-size” value in the “icon-wrapper” class, it will make the icon larger or smaller.
    • If you increase or decrease the “width” and “height” values in the “icon-wrapper” class, it will make the circular border larger or smaller.

    Let me know your thoughts about this solution. If you know of a better way to do this, please leave a comment and share your knowledge.

  • Helpful resources including free icons, Google Analytics tips and email stats – December 2013

    I meant to post this sooner but here are links to articles I found interesting and they can most likely help you with your web sites.

  • Sharing resources: Few free good resources – September 2012

    This is a quick post where I just wanted to make others aware of these cool free tools and resources available.

    • Smashing Magazine blog post about using Opera’s Mobile Emulator to test how web sites look on mobile. The article has a link to where you can download the emulator.
    • Mobilizer, a free Adobe Air tool in beta, where you can test how web sites look on mobile.
    • Onextrapixel.com with a free downloadable e-commerce icon set.
    • DeveloperDrive.com with a post with their list of 10 Best Open Source Tools for Web Developers

    Here are some more good freebies and resources to check out that I didn’t have a chance to post earlier.