WRONG WAY
2015-03-12, 03:17 PM
http://store1.up-00.com/2015-03/142529458521.png
أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية (http://www.egybasma.com/forum/) ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
موضوعنا اليوم عن كيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome ,, الشرح سهل وبسيط بإذن الله ولا يحتاج لمجهود ,, فقط عليك بالتركيز قليلا فى الشرح ثم التطبيق .
دعونا نبدأ ,,
1- ارفع ملف الـ CSS المرفق داخل مجلد منتداك اينما تشاء وليكن على المسار التالى ,,
vb/clientscript/simptip.css2- إذهب إلى لوحة تحكم منتداك ,,
http://www.example.com/vb/admincp3- الإستايلات والقوالب ,,
http://store2.up-00.com/2015-03/1426161204151.png
* التحكم بالإستايلات ,,
http://store2.up-00.com/2015-03/1426161204252.png
* قم بإختيار الإستايل المراد العمل عليه ,,
http://store2.up-00.com/2015-03/142616120463.png
فى قالب الـ headinclude قم باضافة الكود التالى مع تغيير مسار الملف الى المسار الخاص بك الذى وضعت فيه ملف الـ CSS .
<link rel="stylesheet" href="clientscript/simptip.css" type="text/css" media="screen" />http://store2.up-00.com/2015-03/1426161204854.png
4- فى آخر القائمة إضغط حفظ ,,
http://store2.up-00.com/2015-03/1426161204945.png
ولاضافة ايقونة من مكتبة 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 (http://fortawesome.github.io/Font-Awesome/icons/)
النتيجة ,,
http://store1.up-00.com/2015-03/1426162830061.png
http://store1.up-00.com/2015-03/1426162830152.png
مثال مباشر على ما تم شرحه ,,
http://www.egybasma.com/forum/OnlineQuran.php
يمكنك التحكم فى لون الأيقونة من هنا ,, color:#24356C
اما بالنسبة للتحكم فى لون الهوفر للأيقونة - يمكنك التحكم فيه باضافة الكود التالى إلى تعاريف CSS الإضافية/Additional CSS Definitions
.fa-home:hover {
color: #000000;
}
http://store2.up-00.com/2015-03/1426161205156.png
مع تغيير ما يلزم من لون تريد و إسم الأيقونة التى تستخدمها ,,
تحميل ملف الـ Css من هنا (http://www.up-00.com/?rC3I)
دمتم بود ,,
http://store1.up-00.com/2015-03/1425294585292.png
أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية (http://www.egybasma.com/forum/) ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
موضوعنا اليوم عن كيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome ,, الشرح سهل وبسيط بإذن الله ولا يحتاج لمجهود ,, فقط عليك بالتركيز قليلا فى الشرح ثم التطبيق .
دعونا نبدأ ,,
1- ارفع ملف الـ CSS المرفق داخل مجلد منتداك اينما تشاء وليكن على المسار التالى ,,
vb/clientscript/simptip.css2- إذهب إلى لوحة تحكم منتداك ,,
http://www.example.com/vb/admincp3- الإستايلات والقوالب ,,
http://store2.up-00.com/2015-03/1426161204151.png
* التحكم بالإستايلات ,,
http://store2.up-00.com/2015-03/1426161204252.png
* قم بإختيار الإستايل المراد العمل عليه ,,
http://store2.up-00.com/2015-03/142616120463.png
فى قالب الـ headinclude قم باضافة الكود التالى مع تغيير مسار الملف الى المسار الخاص بك الذى وضعت فيه ملف الـ CSS .
<link rel="stylesheet" href="clientscript/simptip.css" type="text/css" media="screen" />http://store2.up-00.com/2015-03/1426161204854.png
4- فى آخر القائمة إضغط حفظ ,,
http://store2.up-00.com/2015-03/1426161204945.png
ولاضافة ايقونة من مكتبة 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 (http://fortawesome.github.io/Font-Awesome/icons/)
النتيجة ,,
http://store1.up-00.com/2015-03/1426162830061.png
http://store1.up-00.com/2015-03/1426162830152.png
مثال مباشر على ما تم شرحه ,,
http://www.egybasma.com/forum/OnlineQuran.php
يمكنك التحكم فى لون الأيقونة من هنا ,, color:#24356C
اما بالنسبة للتحكم فى لون الهوفر للأيقونة - يمكنك التحكم فيه باضافة الكود التالى إلى تعاريف CSS الإضافية/Additional CSS Definitions
.fa-home:hover {
color: #000000;
}
http://store2.up-00.com/2015-03/1426161205156.png
مع تغيير ما يلزم من لون تريد و إسم الأيقونة التى تستخدمها ,,
تحميل ملف الـ Css من هنا (http://www.up-00.com/?rC3I)
دمتم بود ,,
http://store1.up-00.com/2015-03/1425294585292.png