أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
موضوعنا اليوم عن كيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome ,, الشرح سهل وبسيط بإذن الله ولا يحتاج لمجهود ,, فقط عليك بالتركيز قليلا فى الشرح ثم التطبيق .
دعونا نبدأ ,,
1- ارفع ملف الـ CSS المرفق داخل مجلد منتداك اينما تشاء وليكن على المسار التالى ,,
كود:
vb/clientscript/simptip.css
كود:
http://www.example.com/vb/admincp
* التحكم بالإستايلات ,,
* قم بإختيار الإستايل المراد العمل عليه ,,
فى قالب الـ 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>
النتيجة ,,
مثال مباشر على ما تم شرحه ,,
http://www.egybasma.com/forum/OnlineQuran.php
يمكنك التحكم فى لون الأيقونة من هنا ,, color:#24356C
اما بالنسبة للتحكم فى لون الهوفر للأيقونة - يمكنك التحكم فيه باضافة الكود التالى إلى تعاريف CSS الإضافية/Additional CSS Definitions
كود:
.fa-home:hover {
color: #000000;
}
مع تغيير ما يلزم من لون تريد و إسم الأيقونة التى تستخدمها ,,
تحميل ملف الـ Css من هنا
دمتم بود ,,
العرض العادي
الانتقال إلى العرض المتطور
الانتقال إلى العرض الشجري
