BenoService

آکادمی بنو/آموزش Bootstrap

Bootstrap Icons و استفاده از آیکون‌ها

بهنام نوبخت · ۱۴۰۵/۷/۱۲

آیکون‌ها یکی از عناصر مهم در طراحی رابط کاربری هستند و می‌توانند درک بخش‌های مختلف یک وب‌سایت را برای کاربر ساده‌تر کنند. برای مثال، یک آیکون جستجو می‌تواند مفهوم جستجو را بدون نیاز به توضیح طولانی منتقل کند، آیکون سبد خرید می‌تواند کاربر را به بخش خرید هدایت کند و آیکون ویرایش یا حذف می‌تواند عملکرد یک دکمه را سریع‌تر قابل تشخیص کند. Bootstrap در کنار فریم‌ورک CSS خود، مجموعه‌ای از آیکون‌های متن‌باز به نام Bootstrap Icons نیز ارائه می‌کند که شامل تعداد زیادی آیکون آماده در قالب SVG و فونت آیکون است. در این مقاله یاد می‌گیریم Bootstrap Icons چیست، چگونه آن را به پروژه اضافه کنیم، چگونه یک آیکون را نمایش دهیم، اندازه و رنگ آن را تغییر دهیم، از آیکون‌ها داخل Button و Navbar و Card استفاده کنیم، آیکون‌های مناسب برای رابط RTL انتخاب کنیم، از SVG به شکل مستقیم استفاده کنیم و در نهایت یک صفحه کاربردی با Bootstrap و Bootstrap Icons ایجاد کنیم.

Bootstrap Icons چیست؟

Bootstrap Icons یک مجموعه آیکون متن‌باز است که توسط تیم Bootstrap توسعه داده شده است.

این مجموعه برای استفاده در پروژه‌های وب طراحی شده و می‌تواند در کنار Bootstrap یا حتی بدون Bootstrap استفاده شود.

آیکون‌ها برای موارد مختلفی وجود دارند، مانند:

  • Search

  • Home

  • User

  • Gear

  • Heart

  • Star

  • Cart

  • Bell

  • Trash

  • Pencil

  • Check

  • X

  • Arrow

  • Calendar

  • Camera

  • Download

  • Upload

نکته مهم این است که Bootstrap Icons بخشی از فایل CSS اصلی Bootstrap نیست و باید آن را جداگانه به پروژه اضافه کنیم.

چرا از آیکون استفاده کنیم؟

استفاده صحیح از آیکون‌ها می‌تواند رابط کاربری را ساده‌تر و قابل فهم‌تر کند.

برای مثال:

[ Search ]  جستجو
[ User ]    حساب کاربری
[ Cart ]    سبد خرید
[ Gear ]    تنظیمات

البته آیکون نباید جایگزین متن ضروری شود.

برای عملکردهای مهم، مخصوصاً در رابط‌های کاربری پیچیده، بهتر است در صورت نیاز از آیکون همراه با متن استفاده کنیم.

روش‌های استفاده از Bootstrap Icons

چند روش رایج برای استفاده از Bootstrap Icons وجود دارد:

  1. استفاده از CDN

  2. نصب با npm

  3. استفاده مستقیم از SVG

  4. استفاده از فایل‌های محلی

در این مقاله ابتدا روش CDN را بررسی می‌کنیم.

اضافه کردن Bootstrap Icons با CDN

برای استفاده از Bootstrap Icons می‌توانیم Stylesheet مربوط به آن را در <head> صفحه قرار دهیم.

مثال:

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">

بعد از اضافه کردن این فایل، می‌توانیم از کلاس‌های آیکون استفاده کنیم.

اولین آیکون

برای مثال آیکون خانه:

<i class="bi bi-house"></i>

یا:

<span class="bi bi-house"></span>

هر دو روش می‌توانند آیکون را نمایش دهند.

در پروژه‌های جدید بهتر است عنصر را صرفاً بر اساس معنای معنایی HTML انتخاب کنیم و در صورت نیاز از span برای آیکون تزئینی استفاده کنیم.

ساختار کلاس آیکون

کلاس‌های Bootstrap Icons معمولاً از این الگو استفاده می‌کنند:

bi bi-icon-name

مثلاً:

<i class="bi bi-house"></i>

یا:

<i class="bi bi-search"></i>

یا:

<i class="bi bi-person"></i>

قسمت اول:

bi

کلاس اصلی Bootstrap Icons است.

قسمت دوم نام آیکون است.

استفاده از آیکون در Button

یکی از رایج‌ترین کاربردها، قرار دادن آیکون داخل دکمه است.

مثال:

<button class="btn btn-primary">
    <i class="bi bi-save"></i>
    ذخیره
</button>

برای دکمه حذف:

<button class="btn btn-danger">
    <i class="bi bi-trash"></i>
    حذف
</button>

برای ویرایش:

<button class="btn btn-warning">
    <i class="bi bi-pencil"></i>
    ویرایش
</button>

فاصله بین آیکون و متن

می‌توانیم از Utilityهای Bootstrap برای ایجاد فاصله استفاده کنیم.

مثال:

<button class="btn btn-primary">
    <i class="bi bi-save me-2"></i>
    ذخیره
</button>

در پروژه RTL بهتر است از کلاس‌های منطقی مانند me-* و ms-* استفاده کنیم.

این موضوع در مقاله RTL بررسی شد.

Button فقط با آیکون

گاهی می‌خواهیم دکمه فقط شامل آیکون باشد.

مثال:

<button class="btn btn-primary">
    <i class="bi bi-search"></i>
</button>

اما در این حالت باید به دسترس‌پذیری توجه کنیم.

کاربر ممکن است نداند این دکمه چه کاری انجام می‌دهد.

به همین دلیل بهتر است یک نام قابل دسترسی برای آن تعریف کنیم.

مثال:

<button
    type="button"
    class="btn btn-primary"
    aria-label="جستجو">

    <i class="bi bi-search" aria-hidden="true"></i>

</button>

در این مثال:

aria-label="جستجو"

نام عملکرد دکمه را مشخص می‌کند.

و:

aria-hidden="true"

به Screen Reader اعلام می‌کند که آیکون صرفاً تزئینی است.

تغییر اندازه آیکون

می‌توانیم از کلاس‌های Font Size در Bootstrap استفاده کنیم.

مثال:

<i class="bi bi-star fs-1"></i>

یا:

<i class="bi bi-star fs-3"></i>

یا:

<i class="bi bi-star fs-5"></i>

این روش باعث می‌شود اندازه آیکون با سیستم Typography Bootstrap هماهنگ شود.

تغییر رنگ آیکون

از کلاس‌های رنگ Bootstrap می‌توان استفاده کرد.

مثال:

<i class="bi bi-check-circle text-success"></i>

برای خطا:

<i class="bi bi-x-circle text-danger"></i>

برای هشدار:

<i class="bi bi-exclamation-triangle text-warning"></i>

و برای اطلاعات:

<i class="bi bi-info-circle text-info"></i>

ترکیب آیکون و Badge

یکی از کاربردهای رایج، نمایش تعداد اعلان‌ها است.

مثال:

<button
    type="button"
    class="btn btn-light position-relative"
    aria-label="اعلان‌ها">

    <i class="bi bi-bell fs-5"></i>

    <span
        class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">

        5

    </span>

</button>

این الگو در Dashboardها و سایت‌های فروشگاهی بسیار کاربردی است.

آیکون در Navbar

می‌توان آیکون را در منوی سایت نیز قرار داد.

<nav class="navbar navbar-expand-lg bg-body-tertiary">

    <div class="container">

        <a class="navbar-brand" href="#">
            <i class="bi bi-shop"></i>
            فروشگاه
        </a>

        <div class="navbar-nav">

            <a class="nav-link" href="#">
                <i class="bi bi-house me-1"></i>
                خانه
            </a>

            <a class="nav-link" href="#">
                <i class="bi bi-box-seam me-1"></i>
                محصولات
            </a>

            <a class="nav-link" href="#">
                <i class="bi bi-telephone me-1"></i>
                تماس
            </a>

        </div>

    </div>

</nav>

آیکون در Card

آیکون‌ها برای کارت‌های خدماتی نیز بسیار مناسب هستند.

مثال:

<div class="card h-100">

    <div class="card-body text-center">

        <i class="bi bi-code-slash fs-1 text-primary"></i>

        <h2 class="h5 mt-3">
            طراحی سایت
        </h2>

        <p>
            طراحی وب‌سایت‌های مدرن و Responsive.
        </p>

        <a href="#" class="btn btn-outline-primary">
            مشاهده خدمات
        </a>

    </div>

</div>

آیکون در Alert

می‌توان Alert را نیز با آیکون ترکیب کرد.

<div class="alert alert-success" role="alert">

    <i class="bi bi-check-circle-fill me-2"></i>

    اطلاعات با موفقیت ذخیره شد.

</div>

برای خطا:

<div class="alert alert-danger" role="alert">

    <i class="bi bi-exclamation-triangle-fill me-2"></i>

    عملیات با خطا مواجه شد.

</div>

آیکون در فرم

می‌توان آیکون را در Input Group نیز استفاده کرد.

مثال:

<div class="input-group">

    <span class="input-group-text">
        <i class="bi bi-search"></i>
    </span>

    <input
        type="search"
        class="form-control"
        placeholder="جستجو کنید">

</div>

این الگو برای Search Box بسیار کاربردی است.

استفاده از SVG

Bootstrap Icons علاوه بر روش کلاس‌های CSS، آیکون‌ها را به شکل SVG نیز ارائه می‌کند.

SVG یک فرمت برداری است.

مزیت SVG این است که در اندازه‌های مختلف کیفیت خود را حفظ می‌کند.

ساختار ساده SVG:

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    fill="currentColor"
    class="bi bi-check"
    viewBox="0 0 16 16">

    <path d="..."/>

</svg>

در استفاده مستقیم باید کد SVG واقعی آیکون را از منبع Bootstrap Icons دریافت کنیم.

چرا SVG مهم است؟

SVG برای مواردی مانند زیر بسیار مناسب است:

  • تغییر اندازه

  • تغییر رنگ

  • استفاده در طراحی اختصاصی

  • کنترل دقیق

  • استفاده بدون وابستگی به Font Icon

همچنین SVG می‌تواند مستقیماً داخل HTML قرار گیرد.

تفاوت Icon Font و SVG

روش کلاس CSS:

<i class="bi bi-house"></i>

روش SVG:

<svg>
    ...
</svg>

روش اول استفاده بسیار ساده‌ای دارد.

روش دوم کنترل بیشتری روی خود SVG در اختیار ما قرار می‌دهد.

هر دو روش می‌توانند در پروژه‌های واقعی کاربرد داشته باشند.

Bootstrap Icons و RTL

در پروژه فارسی باید به جهت آیکون‌ها توجه کنیم.

برای آیکون‌های بدون جهت مشخص، معمولاً مشکلی وجود ندارد.

مثلاً:

<i class="bi bi-heart"></i>

یا:

<i class="bi bi-star"></i>

اما آیکون‌هایی مانند:

Arrow
Chevron
Reply
Forward
Back

ممکن است به جهت وابسته باشند.

بنابراین نباید فرض کنیم که تمام آیکون‌ها با تغییر dir="rtl" خودکار از نظر معنایی درست می‌شوند.

آیکون‌های جهت‌دار

فرض کنید یک دکمه داریم:

<button class="btn btn-primary">
    ادامه
    <i class="bi bi-arrow-left"></i>
</button>

در یک رابط RTL ممکن است فلش چپ برای مفهوم ادامه مناسب باشد.

اما این موضوع به طراحی و مفهوم موردنظر بستگی دارد.

بنابراین باید آیکون را از نظر معنای عملکرد انتخاب کنیم، نه صرفاً بر اساس جهت فیزیکی آن.

استفاده از آیکون در دکمه بازگشت

مثال:

<button class="btn btn-outline-secondary">

    <i class="bi bi-arrow-right me-2"></i>

    بازگشت

</button>

در یک رابط RTL باید این آیکون را در طراحی واقعی تست کنیم تا مفهوم Back به صورت واضح منتقل شود.

آیکون برای وضعیت‌ها

آیکون‌ها برای نمایش وضعیت نیز مفید هستند.

مثلاً:

<div class="d-flex align-items-center gap-2">

    <i class="bi bi-check-circle-fill text-success"></i>

    <span>
        پرداخت موفق
    </span>

</div>

برای وضعیت در انتظار:

<div class="d-flex align-items-center gap-2">

    <i class="bi bi-clock text-warning"></i>

    <span>
        در انتظار پرداخت
    </span>

</div>

برای وضعیت خطا:

<div class="d-flex align-items-center gap-2">

    <i class="bi bi-x-circle-fill text-danger"></i>

    <span>
        پرداخت ناموفق
    </span>

</div>

آیکون‌های Action در جدول

در پنل‌های مدیریتی، معمولاً برای عملیات جدول از آیکون استفاده می‌شود.

مثال:

<td>

    <button
        class="btn btn-sm btn-outline-primary"
        aria-label="ویرایش">

        <i class="bi bi-pencil" aria-hidden="true"></i>

    </button>

    <button
        class="btn btn-sm btn-outline-danger"
        aria-label="حذف">

        <i class="bi bi-trash" aria-hidden="true"></i>

    </button>

</td>

در این حالت آیکون‌ها عملکرد دکمه را نشان می‌دهند و aria-label نیز برای دسترس‌پذیری اضافه شده است.

ساخت دکمه Icon Button اختصاصی

اگر در پروژه تعداد زیادی Icon Button داریم، می‌توانیم یک کلاس اختصاصی بسازیم.

.icon-button {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
}

سپس:

<button
    class="btn btn-primary icon-button"
    aria-label="تنظیمات">

    <i class="bi bi-gear" aria-hidden="true"></i>

</button>

این روش برای Dashboardها کاربرد زیادی دارد.

استفاده از آیکون در صفحه Dashboard

یک Dashboard ساده می‌تواند چنین ساختاری داشته باشد:

Dashboard
    |
    +-- Users
    +-- Orders
    +-- Revenue
    +-- Notifications

و هر بخش می‌تواند آیکون مخصوص خود را داشته باشد.

مثلاً:

<div class="row g-4">

    <div class="col-md-3">

        <div class="card">

            <div class="card-body">

                <i class="bi bi-people fs-2 text-primary"></i>

                <h2 class="h6 mt-3">
                    کاربران
                </h2>

                <strong class="fs-4">
                    1250
                </strong>

            </div>

        </div>

    </div>

    <div class="col-md-3">

        <div class="card">

            <div class="card-body">

                <i class="bi bi-cart-check fs-2 text-success"></i>

                <h2 class="h6 mt-3">
                    سفارش‌ها
                </h2>

                <strong class="fs-4">
                    320
                </strong>

            </div>

        </div>

    </div>

</div>

نکات دسترس‌پذیری

استفاده از آیکون نباید باعث شود رابط کاربری برای کاربران Screen Reader نامفهوم شود.

اگر آیکون فقط تزئینی است:

<i
    class="bi bi-check-circle"
    aria-hidden="true">
</i>

اما اگر آیکون تنها محتوای یک Button است:

<button
    class="btn btn-danger"
    aria-label="حذف">

    <i
        class="bi bi-trash"
        aria-hidden="true">
    </i>

</button>

این روش بسیار بهتر است.

آیکون نباید تنها راه انتقال اطلاعات باشد

فرض کنید فقط از رنگ قرمز برای خطا استفاده کنیم:

[ Red Icon ]

کاربرانی که مشکل تشخیص رنگ دارند ممکن است اطلاعات را به خوبی دریافت نکنند.

بهتر است آیکون، متن یا توضیح نیز وجود داشته باشد:

[ Error Icon ] عملیات ناموفق بود

بنابراین رنگ، آیکون و متن می‌توانند در کنار هم استفاده شوند.

انتخاب نام مناسب برای آیکون

هنگام انتخاب آیکون، باید به مفهوم آن توجه کنیم.

مثلاً برای حذف:

<i class="bi bi-trash"></i>

برای ویرایش:

<i class="bi bi-pencil"></i>

برای ذخیره:

<i class="bi bi-save"></i>

برای دانلود:

<i class="bi bi-download"></i>

برای آپلود:

<i class="bi bi-upload"></i>

انتخاب آیکون مناسب باعث می‌شود کاربر سریع‌تر عملکرد را تشخیص دهد.

پروژه عملی: پنل مدیریت ساده

در این مثال یک پنل مدیریت فارسی ایجاد می‌کنیم.

<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>پنل مدیریت</title>

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
        rel="stylesheet">

    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">

</head>

<body class="bg-light">

    <nav class="navbar navbar-dark bg-dark">

        <div class="container">

            <a class="navbar-brand" href="#">

                <i class="bi bi-speedometer2"></i>

                پنل مدیریت

            </a>

            <button
                class="btn btn-outline-light"
                aria-label="اعلان‌ها">

                <i
                    class="bi bi-bell"
                    aria-hidden="true">
                </i>

            </button>

        </div>

    </nav>


    <main class="container py-5">

        <h1 class="h3 mb-4">
            داشبورد
        </h1>


        <div class="row g-4">

            <div class="col-md-6 col-lg-3">

                <div class="card h-100">

                    <div class="card-body">

                        <i class="bi bi-people fs-1 text-primary"></i>

                        <h2 class="h6 mt-3">
                            کاربران
                        </h2>

                        <p class="fs-3 fw-bold mb-0">
                            1250
                        </p>

                    </div>

                </div>

            </div>


            <div class="col-md-6 col-lg-3">

                <div class="card h-100">

                    <div class="card-body">

                        <i class="bi bi-cart-check fs-1 text-success"></i>

                        <h2 class="h6 mt-3">
                            سفارش‌ها
                        </h2>

                        <p class="fs-3 fw-bold mb-0">
                            320
                        </p>

                    </div>

                </div>

            </div>


            <div class="col-md-6 col-lg-3">

                <div class="card h-100">

                    <div class="card-body">

                        <i class="bi bi-currency-dollar fs-1 text-warning"></i>

                        <h2 class="h6 mt-3">
                            درآمد
                        </h2>

                        <p class="fs-3 fw-bold mb-0">
                            85M
                        </p>

                    </div>

                </div>

            </div>


            <div class="col-md-6 col-lg-3">

                <div class="card h-100">

                    <div class="card-body">

                        <i class="bi bi-bell fs-1 text-danger"></i>

                        <h2 class="h6 mt-3">
                            اعلان‌ها
                        </h2>

                        <p class="fs-3 fw-bold mb-0">
                            12
                        </p>

                    </div>

                </div>

            </div>

        </div>


        <div class="card mt-4">

            <div class="card-header">

                <i class="bi bi-table me-2"></i>

                آخرین کاربران

            </div>

            <div class="table-responsive">

                <table class="table table-hover mb-0">

                    <thead>

                        <tr>

                            <th>
                                نام
                            </th>

                            <th>
                                ایمیل
                            </th>

                            <th>
                                وضعیت
                            </th>

                            <th>
                                عملیات
                            </th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr>

                            <td>
                                علی رضایی
                            </td>

                            <td dir="ltr">
                                ali@example.com
                            </td>

                            <td>

                                <span class="badge text-bg-success">

                                    <i
                                        class="bi bi-check-circle me-1"
                                        aria-hidden="true">
                                    </i>

                                    فعال

                                </span>

                            </td>

                            <td>

                                <button
                                    class="btn btn-sm btn-outline-primary"
                                    aria-label="ویرایش کاربر">

                                    <i
                                        class="bi bi-pencil"
                                        aria-hidden="true">
                                    </i>

                                </button>

                                <button
                                    class="btn btn-sm btn-outline-danger"
                                    aria-label="حذف کاربر">

                                    <i
                                        class="bi bi-trash"
                                        aria-hidden="true">
                                    </i>

                                </button>

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </main>


    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js">
    </script>

</body>

</html>

بررسی ساختار پروژه

در مثال بالا از چند بخش Bootstrap به صورت هم‌زمان استفاده کردیم:

Dashboard
    |
    +-- Navbar
    |     +-- Icon
    |     +-- Notification Button
    |
    +-- Statistics Cards
    |     +-- Users
    |     +-- Orders
    |     +-- Revenue
    |     +-- Notifications
    |
    +-- Users Table
          +-- Status Icon
          +-- Edit Icon
          +-- Delete Icon

این الگو پایه بسیاری از پنل‌های مدیریتی واقعی است.

Bootstrap Icons بدون Bootstrap

نکته مهم این است که Bootstrap Icons وابستگی اجباری به Bootstrap CSS ندارد.

یعنی می‌توانیم Bootstrap Icons را در یک پروژه معمولی HTML/CSS نیز استفاده کنیم.

مثلاً:

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">

سپس:

<i class="bi bi-house"></i>

بنابراین Bootstrap Icons یک مجموعه مستقل از Bootstrap CSS محسوب می‌شود.

نکات مهم در استفاده حرفه‌ای

هنگام استفاده از آیکون‌ها این موارد را رعایت کنید:

۱. آیکون باید مفهوم مشخصی داشته باشد.

۲. از تعداد بیش از حد آیکون استفاده نکنید.

۳. برای Icon Buttonهای بدون متن، aria-label قرار دهید.

۴. آیکون تزئینی را با aria-hidden="true" مشخص کنید.

۵. آیکون‌های جهت‌دار را در رابط RTL بررسی کنید.

۶. اندازه آیکون را با طراحی صفحه هماهنگ کنید.

۷. از یک سبک آیکون ثابت در کل پروژه استفاده کنید.

۸. در صورت نیاز از SVG استفاده کنید.

تمرین عملی

یک صفحه فروشگاه اینترنتی ایجاد کنید که شامل موارد زیر باشد:

  • Navbar

  • آیکون خانه

  • آیکون محصولات

  • آیکون سبد خرید

  • آیکون کاربر

  • سه کارت محصول

  • آیکون علاقه‌مندی

  • آیکون مشاهده محصول

  • دکمه خرید

  • Alert موفقیت

  • Search Box

صفحه باید RTL باشد:

<html lang="fa" dir="rtl">

و از Bootstrap RTL و Bootstrap Icons استفاده کند.

تمرین پیشرفته

یک Dashboard مدیریتی کامل‌تر ایجاد کنید که شامل:

  • Sidebar

  • Navbar

  • Notification

  • Statistics Cards

  • Users Table

  • Edit Button

  • Delete Button

  • Search

  • Pagination

  • Status Badge

  • Icons

باشد.

برای دکمه‌هایی که فقط آیکون دارند، حتماً از:

aria-label

استفاده کنید.

برای آیکون‌هایی که صرفاً تزئینی هستند نیز:

aria-hidden="true"

را در نظر بگیرید.

جمع‌بندی

در این مقاله با Bootstrap Icons آشنا شدیم و یاد گرفتیم که مجموعه آیکون‌های Bootstrap به صورت جداگانه ارائه می‌شود و می‌توان آن را از طریق CDN، npm یا SVG در پروژه استفاده کرد. نحوه نمایش آیکون با کلاس‌هایی مانند bi bi-house، تغییر اندازه با Utilityهای Bootstrap، تغییر رنگ با کلاس‌هایی مانند text-primary و استفاده از آیکون در Button، Navbar، Card، Alert، Form و Dashboard را بررسی کردیم. همچنین با اهمیت SVG و تفاوت آن با روش Icon Font آشنا شدیم و نکات مهم مربوط به استفاده از آیکون‌های جهت‌دار در رابط‌های RTL را بررسی کردیم. یکی از مهم‌ترین مباحث این مقاله نیز دسترس‌پذیری بود؛ یاد گرفتیم که دکمه‌های دارای آیکون بدون متن باید نام قابل دسترسی داشته باشند و آیکون‌های صرفاً تزئینی می‌توانند با aria-hidden="true" از Screen Reader مخفی شوند. اکنون می‌توانیم آیکون‌ها را به شکل اصولی و حرفه‌ای در پروژه‌های Bootstrap استفاده کنیم.

۱۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.