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.
42 lines
3.8 KiB
HTML
42 lines
3.8 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'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'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><a href="icons.pdf">>>> Download PDF</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="../terminal/">First Post</a> <svg class="footer-posts" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="#bd93f9" fill-rule="evenodd" d="M2.232 12.207a.75.75 0 0 1 1.06.025l3.958 4.146V6.375a5.375 5.375 0 0 1 10.75 0V9.25a.75.75 0 0 1-1.5 0V6.375a3.875 3.875 0 0 0-7.75 0v10.003l3.957-4.146a.75.75 0 0 1 1.085 1.036l-5.25 5.5a.75.75 0 0 1-1.085 0l-5.25-5.5a.75.75 0 0 1 .025-1.06Z" clip-rule="evenodd"/></svg></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>
|
|
|