When I was building my portfolio site, I wanted to include icons of the programming languages I use, like HTML5, CSS3, C#, JavaScript, etc. But I didn’t want to just list them, I wanted more pizzazz. I found some really nice (free to use) development language icons on https://devicon.dev and downloaded the master folder and copy/pasted the necessary files into my project folder. I followed the instructions on what ref links to add to my index.html file and the icon name specific link and voila! I had icons...tiny...tiny icons. I tried several ways to try and make them bigger, but all I managed to do is instead of a row, I turned them into a column... a very tiny column. Needless to say I was frustrated, I just wanted pretty icons that people could actually view with their naked eye.
Google is my best friend and should be yours too. I found out that my website template’s CSS style-sheet already had a generic icon size and all I needed to do was override the size in my icon line on my Index file. I was able to tell it to make the specific icon what ever size I wanted, so naturally, I set mine to 18px. And then I had big, beautiful, and VISIBLE icons!
I would have saved so much time and frustration (and eye strain) if I had turned to Google sooner, after all, there is no shame in making a few attempts and then turning to the experts, or at least others who experienced the same frustration and were nice enough to put their solution on the internet for others, just like I’m doing right...now. Go forth and make big, beautiful icons, or medium, or maybe your icon was too big, now you can make it smaller.
Top comments (0)