قديم 2015-03-12, 02:17 PM
المشاركة : ( 1 )
.:: ! HTML PROF ::.
الصورة الرمزية WRONG WAY
WRONG WAY
.:: EGY BASMA ::.
Post شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome
شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome
أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
موضوعنا اليوم عن كيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome ,, الشرح سهل وبسيط بإذن الله ولا يحتاج لمجهود ,, فقط عليك بالتركيز قليلا فى الشرح ثم التطبيق .
دعونا نبدأ ,,
1- ارفع ملف الـ CSS المرفق داخل مجلد منتداك اينما تشاء وليكن على المسار التالى ,,
كود:
vb/clientscript/simptip.css
2- إذهب إلى لوحة تحكم منتداك ,,
كود:
http://www.example.com/vb/admincp
3- الإستايلات والقوالب ,,
شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome
* التحكم بالإستايلات ,,
شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome
* قم بإختيار الإستايل المراد العمل عليه ,,
شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome
فى قالب الـ headinclude قم باضافة الكود التالى مع تغيير مسار الملف الى المسار الخاص بك الذى وضعت فيه ملف الـ CSS .
كود:
<link rel="stylesheet" href="clientscript/simptip.css" type="text/css" media="screen" />
شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome
4- فى آخر القائمة إضغط حفظ ,,
شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome
ولاضافة ايقونة من مكتبة 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
النتيجة ,,
شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome

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

مثال مباشر على ما تم شرحه ,,
http://www.egybasma.com/forum/OnlineQuran.php
يمكنك التحكم فى لون الأيقونة من هنا ,, color:#24356C
اما بالنسبة للتحكم فى لون الهوفر للأيقونة - يمكنك التحكم فيه باضافة الكود التالى إلى تعاريف CSS الإضافية/Additional CSS Definitions
كود:
.fa-home:hover {
    color: #000000;
}
شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome
مع تغيير ما يلزم من لون تريد و إسم الأيقونة التى تستخدمها ,,
تحميل ملف الـ Css من هنا
دمتم بود ,,
شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome
الـمـصـدر : معهد بسمة مصرية - مـن : قسم تطوير الـ vBulletin - كـاتـب الـمـوضـوع : WRONG WAY

مـن مـواضـيع WRONG WAY
مساحة إعلانية


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

الانتقال السريع
المواضيع المتشابهه
الموضوع
وجه مدينة القاهرة في مكتبة القاهرة الأحد