ايقونات كروابط (Icon link)
أنشئ بسرعة روابط تشعبية منسقة باستخدام Bootstrap Icons أو أي أيقونات أخرى.
يقوم مكون المساعدة "أيقونة كـ رابط" (icon link) بتعديل أنماط الروابط الافتراضية لتحسين مظهرها ومحاذاة أي زوج من الأيقونات والنصوص بسرعة. يتم ضبط المحاذاة عبر تنسيق flexbox مضمن وقيمة gap افتراضية. نقوم بتنسيق الخط السفلي بإزاحة ولون مخصصين. يتم تحديد حجم الأيقونات تلقائياً ليكون 1em ليتناسب بشكل أفضل مع font-size الخاص بالنص المرتبط بها.
تفترض روابط الأيقونات استخدام Bootstrap Icons، ولكن يمكنك استخدام أي أيقونة أو صورة تفضلها.
عندما تكون الأيقونات زخرفية بحتة، يجب إخفاؤها عن التقنيات المساعدة باستخدام aria-hidden="true"، كما فعلنا في أمثلتنا. بالنسبة للأيقونات التي تحمل معنى، قدم بديلاً نصياً مناسباً عن طريق إضافة role="img" و aria-label="..." مناسب للـ (SVG)s.
مثال
خذ عنصر <a> عادي، وأضف .icon-link، وأدرج أيقونة على يسار أو يمين نص الرابط الخاص بك. يتم تحديد حجم الأيقونة وموضعها ولونها تلقائياً.
<a class="icon-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
</svg>
Icon link
</a><a class="icon-link" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>التنسيق عند التمرير (Style on hover)
أضف .icon-link-hover لتحريك الأيقونة إلى اليمين عند التمرير.
<a class="icon-link icon-link-hover" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>تخصيص
قم بتعديل تنسيق رابط الأيقونة باستخدام متغيرات CSS الخاصة بالروابط، أو متغيرات Sass، أو الأدوات (utilities)، أو الأنماط المخصصة.
متغيرات الـ (CSS)
قم بتعديل متغيرات CSS من نوع --bs-link-* و --bs-icon-link-* حسب الحاجة لتغيير المظهر الافتراضي.
خصص تحويل التمرير (hover transform) عن طريق تجاوز متغير CSS --bs-icon-link-transform:
<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
</svg>
Icon link
</a>خصص اللون عن طريق تجاوز متغير CSS --bs-link-*:
<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>متغيرات الـ (Sass)
خصص متغيرات Sass الخاصة برابط الأيقونة لتعديل جميع أنماط روابط الأيقونات عبر مشروعك المدعوم بـ Bootstrap.
$icon-link-gap: .375rem;
$icon-link-underline-offset: .25em;
$icon-link-icon-size: 1em;
$icon-link-icon-transition: .2s ease-in-out transform;
$icon-link-icon-transform: translate3d(.25em, 0, 0);
واجهة برمجة تطبيقات أدوات Sass (Sass utilities API)
قم بتعديل روابط الأيقونات باستخدام أي من أدوات الروابط الخاصة بنا لتعديل لون الخط السفلي وإزاحته.
<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>