Tag: Quick How To

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

  • How to zoom in using CSS transitions

    Ever mouse over an image on a website and it zooms in subtly and then you move your mouse pointer off the image, and it goes back to normal? Well, they are most likely using a CSS transition to make that effect. Below is some CSS and HTML code to use to make that effect.…

  • New Edge browser feature saves resources when gaming

    In June, the Microsoft Edge web browser had an update where it released a new feature called “Efficiency Mode,” which helps improve power usage by saving computer resources (CPU usage). This is especially useful when running high resource applications on your PC such as playing a video game or even when you’re running applications that…

  • WordPress 5.9: How to easily change blog posts list layout

    So with WordPress 5.9, the theme customizer is gone (don’t worry it is still there for past themes, but not for new Block Themes) and we have the new Block Editor (for Block Themes), which has a lot of promise but needs some polishing. The “Twenty Twenty-Two” theme that comes with WordPress 5.9, is a…

  • Disabling tab hover cards in MS Edge

    In a previous blog post I listed the steps for disabling tab hover cards in Chrome but now I must share how to do the same in the Microsoft Edge web browser. If you’re using MS Edge and not sure what a tab hover card is, move your mouse cursor to a tab, leave it…

  • How to stop showing box that appears when mousing over Chrome tabs

    A recent Chrome browser update brought “tab hover cards” which are small boxes that appear when you put your mouse on a tab. These boxes display the website’s “title” tag and domain name, as shown in the screenshot below. For me, these tab hover cards started to annoy me, as they block part of the…

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