هيلبرنت | Helpernt - عرض مشاركة واحدة - شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome

احصائياتى



الردود
4



المشاهدات
1856



هيلبرنت

.:: رفيق درب ::.



المشاركات
11,551



+التقييم
321



تاريخ التسجيل
Jul 2015



الاقامة
فى الدنيا



نظام التشغيل
windows 8



رقم العضوية
18

11-11-2015, 11:41 PM

المشاركة 1

11-11-2015, 11:41 PM

المشاركة 1

شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome

موضوعنا اليوم عن كيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome ,, الشرح سهل وبسيط بإذن الله ولا يحتاج لمجهود ,, فقط عليك بالتركيز قليلا فى الشرح ثم التطبيق .
دعونا نبدأ ,,
1- ارفع ملف الـ CSS المرفق داخل مجلد منتداك اينما تشاء وليكن على المسار التالى ,,

كود:

vb/clientscript/simptip.css

2- إذهب إلى لوحة تحكم منتداك ,,

كود:

http://www.example.com/vb/admincp

3- الإستايلات والقوالب ,,

* التحكم بالإستايلات ,,

* قم بإختيار الإستايل المراد العمل عليه ,,

فى قالب الـ headinclude قم باضافة الكود التالى مع تغيير مسار الملف الى المسار الخاص بك الذى وضعت فيه ملف الـ CSS .
كود:
<link rel="stylesheet" href="clientscript/simptip.css" type="text/css" media="screen" />

4- فى آخر القائمة إضغط حفظ ,,

ولاضافة ايقونة من مكتبة Font Awesome مع تلميحات الـ Tooltip ننسخ الكود التالى مع تغيير ما يلزم ,,

كود:

<a class="simptip-position-bottom simptip-smooth" data-tooltip="الرئيسية" href="http://www.egybasma.com/forum"><span style="color:#24356C" > <i class="fa fa-home fa-5x"></i></span></a>

يمكنك إختيار الأيقونة التى تريدها من خلال الدخول إلى المكتبة من هنا ,, Font Awesome Icons

يمكنك التحكم فى لون الأيقونة من هنا ,, color:#24356C
اما بالنسبة للتحكم فى لون الهوفر للأيقونة - يمكنك التحكم فيه باضافة الكود التالى إلى تعاريف CSS الإضافية/Additional CSS Definitions

كود:

.fa-home:hover {     color: #000000; }

مع تغيير ما يلزم من لون تريد و إسم الأيقونة التى تستخدمها ,,