So, the other day I was working on a project and I needed to add some icons. Specifically, I wanted to include some F1 racing icons. I figured, “Hey, this should be pretty straightforward, right?” Well, it turned out to be a bit of a learning experience, so I thought I’d share what I did.
First, I started by hitting up the internet, searching for “F1 icons”. I mean, that’s the obvious first step, isn’t it? I browsed through a few websites, checking out different icon packs. I was looking for something clean, modern, and, of course, related to Formula 1.
Finding the Right Icons
After a bit of searching, I stumbled upon some SVG icons. These were perfect! Vector graphics are great because you can scale them up or down without losing any quality. That’s a huge plus.
Getting Them into My Project
I decided to get the icons into my project.
I took those SVG files and put them into my image assets folder.
Then, I start to add the icons in HTML:
I basically just put the `svg` into the `img` tag.
Playing Around with Styling
Once I had the icons in place, I needed to make sure they looked good with the rest of my design. This is where the fun part started – playing around with the CSS!
- Resizing: I used the `width` and `height` properties to get the icons to the perfect size. I didn’t want them to be too big and overpowering, but also not so small that they were hard to see.
- Colors: I used the inspector to adjust the `fill` to change the color of the icon.
And that was it. That’s how I got F1 icons for my project.
It looks pretty great on the page.
