You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

41 lines
3.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>(POST) Why I Removed All Icons</title>
<link rel="icon" type="image/x-icon" href="../images/favicon.webp">
<link rel='stylesheet' type='text/css' href="../style.css">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="../images/favicons/blog.webp"></head>
<body>
<a style="text-decoration: none;" href="../">
<pre class="main-header">
_______ _ _ _______ __ __ _______ _______ __ _
|______ | | |______ \_/ |_____| |_____| | \ |
______| |_____| | | | | | | | \_|
</pre>
</a>
<hr/><p><a href="../">sf.me</a> > <a style="color:#bd93f9" href="../blog/">Blog</a> > <a style="color:#bd93f9" href=".">Why I Removed All Icons</a></p>
<h1>Why I Removed All Icons</h1>
<p style="font-size:110%">Posted on: <strong>28 October 2023</strong></p>
<p style="font-size:110%">Reading time: <strong><strong>1 min</strong>
<p style="font-size:110%"></strong>Category: <a style="color:#ff79c6" href="../blog/updates/"><strong>Updates</strong></a></p>
<p>If you browsed my website recently, you would have noticed that I removed all icons. There are many reasons for this change. The TLDR is that my love for quirky icons spiraled into flaming anger whenever I had to align them properly. I will go into more detail in this post.</p>
<h2 id="clutter">Clutter</h2>
<p>Icons cluttered my website. No matter how hard I tried, they never looked right on all devices at once. If it was working fine on desktop, it wasn&#39;t on mobile and vice versa. This led to hours trying to adjust the size and position of each icon to make sure they looked good which they never did.</p>
<h2 id="readability">Readability</h2>
<p>The last point ties into this one. The removal of icons led to clear lists, text and headings. I did not expect the website to look this much better without icons. This makes the website look consistent.</p>
<h2 id="easier">Easier</h2>
<p>Removing icons makes my job a whole lot easier. I don&#39;t have to worry about how an icon will look. I just copy-paste a folder and start typing away.</p>
<h2 id="conclusion">Conclusion</h2>
<p>To sum it up, I removed icons because they made my website look cluttered. Without them, my website is more readable and is easier for me to work on.</p>
<p><a href="mailto:sf@sufyaan.me?subject=Why%20I%20Removed%20All%20Icons">>>> Reply To Me</a></p>
<p style="text-align:center;"><a href="../electric/" style="color:#bd93f9"><svg class="footer-posts" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><mask id="ipSLeftOne0"><path fill="#fff" stroke="#fff" stroke-linejoin="round" stroke-width="4" d="M30 36L18 24l12-12v24Z"/></mask><path fill="#bd93f9" d="M0 0h48v48H0z" mask="url(#ipSLeftOne0)"/></svg>Previous Post</a> - <a style='color:#bd93f9' href="../subs/">Next Post</a> <svg class='footer-posts' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><mask id='ipSRightOne0'><path fill='#fff' stroke='#fff' stroke-linejoin='round' stroke-width='4' d='m20 12l12 12l-12 12V12Z'/></mask><path fill='#bd93f9' d='M0 0h48v48H0z' mask='url(#ipSRightOne0)'/></svg></p></p>
<hr/>
<footer>
<p class="footer-text"><a style="color:#bd93f9" href="../blog">blog</a> - <a style="color:#ffb86c" href="../about">about</a> - <a style="color:#f1fa8c" href="../portfolio">portfolio</a> - <a style="color:#ff5555" href="../links">links</a></p>
<p class="footer-text" style="font-size:80%"><a href="../">sufyaan.me</a></p><p class="footer-text" style="font-size:65%"><a style="color:#aaaaaa" href="../sitemap">Site Map</a></p>
</footer>