سجل في المعهد لتفعيل روابط التحميل

للتسجيل اضغط على الزر التسجيل
ندعم منتديات vBulletin بتقنية Css3
A L 6 W E R

[ شرح ] مكتبة Icomoon لصناعة و تحويل الايقونات من صور الى خطوط


مكتبة Icomoon لصناعة و تحويل الايقونات من صور الى خطوط

رقم الموضوع : 7425

تطوير المواقع والمنتديات

 

   [ 1 ]
18-01-2015, 06:34 AM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تواصل معي مباشرة
الصورة الرمزية لـ AlM6weR
AlM6weR
متواجد
[ مؤسس معهد المطوّر ]

اسمي : فخري الحاتم - أبو محمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,940 تقييم المستوى17976 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 290   تم شكره 758 مرة في 579 مشاركة
Post2 مكتبة Icomoon لصناعة و تحويل الايقونات من صور الى خطوط





حرصا منا دائم فى تقديم احدث التطورات فى عالم الويب اليوم اتى لكم بدرس هام
هو تحويل الايقونات من صور الى خطوط

اولا : ماهى أيقونات الخطوط :
الأيقونات الخطوط Icon Fonts هي بكل بساطة عبارة عن خط بامتداداته المعروفة (TTF، EOT، SVG…)، حيث أن الحروف هنا عبارة عن رموز، عند استخدامها بطريقة معينة تحول إلى أيقونات جميلة أنيقة،

مميزات أستخدم خاصية أيقونات الخطوط ؟
سهولة استخدامها و التحكم بها، لأنها عبارة عن خط؛
سهولة التحكم في لونها و حجمها عن طريق خواص CSS، و دون الإضرار بجودتها؛
تستخدم فى المنتديات و المدونات والقوالب
أفضل أيقونات الخطوط المتوفرة مجانا :
Fontello
Font Awesome
Modern Pictograms
Vector Social Icons
هذا هو الذى سنقوم بشرحه Ico Moon
Iconic
Foundation Icons
Entypo
Marekventure
Typicons
Heydonworks
وباذن الرحمن سيتم شرح icomoon مع احد التطبيقات لهما

الاول :

هندخل على الموقع من خلال الرابط هذا
â‌چ IcoMoon - Icon Fonts Done Right
ثم نعمل كما بالصورة التالية :



وهذا شرح الازار الموجودة بالصفحة



بمجرد الضغط على القائمة اللى بالصورة السابقة تظهر لنا هذه الصفحة وبها ما نريدة من تحريك الصورة او عكسها كما هو مبين بالصور



ثم نقوم باختيار الايقونات كما تشاء ومهما كان عددها كما بالصورة الاتيه ثم نضغط على font



بمجرد الضغط على فونت يفتح لنا صفحة بها الايقونات اللى اخترناها مع رقمها



ثم تضغط على download لتحميل الملف اللى ظهر عندنا ما بالصورة



ثم تضغط على download لتحميل الملف اللى ظهر عندنا ما بالصورة



الان خد فولدر الفونت وضعه بمجلد استايلك ومن ثم افتح ملف style باى برنامج محرر نصوص يظهر لك اكواد كما بالصورة



لوحدها بهذا الشكل لن تفيد اطلاقا ودى اهم نقطة قم بوضع هذا الكود



HTML & CSS

[data-icon]:before font-family'icomoon'contentattr(data-icon); speaknonefont-weightnormalfont-variantnormaltext-transformnoneline-height1; -webkit-font-smoothingantialiased; } 
ثم خد هذة الكود وقم بوضعه فى ملف style الذى اشارة له فى الصور السابقة ليصبح كما بالصورة :



تبقى عندنا فقط كود html
وده على هذا الشكل :

HTML & CSS

<span aria-hidden="true" data-icon="&#xe001;" class="down-arrow"></span
كما بالصورة ايضا :



صورة من العمل لقالب بوست ليجاسى مثل نقطة تطوير :



:end:

الموضوع منقول من { ابو كريم ]




كلمات البحث - معهد المطور

ارشفة, ستايل, كود, هاك, html, css, java, BBcode, seo, php, JavaScript, Product, Style


أبوعبدالله   المعجبون بمشاركة AlM6weR


توقيعي



عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).



   [ 2 ]
09-03-2015, 02:21 AM
6572
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
karim elhusseiny
غير متواجد
[ عضو مبتدئ ]

تاريخ الإنضمام11-11-2013 عدد المشاركات3 تقييم المستوى0
 
افتراضي رد: مكتبة Icomoon لصناعة و تحويل الايقونات من صور الى خطوط


شرح رائع جدا




   [ 3 ]
09-03-2015, 02:15 PM
6044
الصورة الرمزية لـ ali amp
ali amp
غير متواجد
[ مطوّر مشارك ]

اسمي : Ali Mosbah , أهتم بـ Php MySQL codeigniter .
تاريخ الإنضمام03-08-2013 عدد المشاركات183 تقييم المستوى304 الدولةalgeria
الإعجابات التي قدمها للأعضاء 23   تم شكره 55 مرة في 51 مشاركة
افتراضي رد: مكتبة Icomoon لصناعة و تحويل الايقونات من صور الى خطوط


مبدع يقود شبكة الابداع واصل يا استاد ابو محمد
لو تعمل لنا دروس بالفيديو لعمل قوالب vb افضل واروع





مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
لصناعة, مكتبة, الايقونات, تحويل, icomoon, خطوط

أدوات الموضوع إبحث في الموضوع
إبحث في الموضوع:

البحث المتقدم


المواضيع المتشابهه للموضوع: مكتبة Icomoon لصناعة و تحويل الايقونات من صور الى خطوط
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
حل مشكلة الايقونات الصغيرة للقائمة للتحديث v30 لـ Nokia N95 & N958G AlM6weR سيمبيان العام ( نوكيا ) General Symbian Nokia 2 13-05-2013 11:01 PM
خطوط الديوانيه 2011 - خطوط الرقعه للتصميم 2011 مسوي جوو البرامج العامه والشروحات 4 09-08-2011 03:20 PM
UberIcon 1.0.4 برنامج لعمل مؤثرات عند الضغط على الايقونات AlM6weR البرامج العامه والشروحات 0 05-07-2010 02:04 AM


الساعة الآن 01:33 PM

RSS RSS 2.0 XML Sitemap1 Sitemap2 HTML Tags اتصل بنا بيان الخصوصية

Powered by vBulletin@Version 3.8.7 .Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
المشاركات والمواضيع تعبر عن رأي كاتبها وليس بالضرورة رأي المطوّر
وجميع الحقوق محفوظة لاصحابها