עבודה עם סמלים ואייקונים ב-HTML

שימוש בסמלים ואייקונים יכול לשפר את העיצוב ולספק חוויית משתמש טובה יותר.

שימוש באייקונים מתוך פונט

ספריות כמו Font Awesome מאפשרות להשתמש באייקונים כגופנים.

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    
        <i class="fas fa-home"></i> בית
        <i class="fas fa-user"></i> משתמש
        

השתמשנו בספריית Font Awesome כדי להוסיף אייקונים באמצעות קלאסים.

הוספת אייקונים בתמונות

ניתן להוסיף אייקונים על גבי תמונות בעזרת CSS.

        <style>
          .icon-overlay {
            position: relative;
            display: inline-block;
          }
          .icon-overlay img {
            display: block;
          }
          .icon-overlay .icon {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            color: white;
          }
        </style>
    
        <div class="icon-overlay">
          <img src="image.jpg" alt="תמונה">
          <i class="fas fa-heart icon"></i>
        </div>
        

כאן השתמשנו ב-CSS כדי למקם אייקון מעל התמונה.

שימוש באייקונים מהשירותים המובנים של HTML

HTML5 כולל מספר אייקונים מובנים שניתן להשתמש בהם במקרים מסוימים.

        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        

השתמשנו ב-SVG ליצירת אייקון חץ ב-HTML5.