تصميم موقعك بإستخدام خط Awesome المذهل لكل ماتحتاجه من ايقونات
يُعتبر خط Awesome من الخطوط الممتازة لتصميم المواقع وهو الهدف الاساسي من خلاله بالتحكم بايقونات الموقع والحصول عليها بطرق بسيطة جدا وسرعة فائقة تغنيك عن برامج الفوتوشوب والايقونات المصورة في هذا الموضوع اليوم سوف نتعلم كيفية تشغيل هذا الخط على مواقع الويب ومدونات بلوجر وأمثلة مذهلة عنهمميزات خط Awesome:
يوفر لك الخط 479 ايقونة متنوعةالتحكم بحجم الايقونات وحركاتها
إستخدامه مع css
لا تستخدم جافا سكربت
ايقونات خفيفة الوزن
لاحظ بالقائمة المنسدلة السابقة لم استخدم اية رابط صورة لا في css ولا داخل الروابط
فقط وضعت الكود التالي فوق </head>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
ثم دخلت من هنا وبدأت بأختيار الايقونات التي تناسب القائمة المنسدلة
<a class='fa-home' href='/'>
الرئيسية
</a>
<a class='fa fa-picture-o' href='#'>
صور
</a>
<a class='fa fa-comment-o' href='http://www.madad2.com/search/label/بلوجر' target='_blank'>
بلوجر
</a>
<a class='fa fa-laptop' href='#'>
برامج
</a>
فقط يجب تضمين رمز الايقونة بالرابط كما هو ظاهر امامكم في الروابط السابقة fa-home
امثلة:
باحجام مختلفة بسهولة
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
fa-2x
fa-3x
fa-4x
fa-5x
To increase icon sizes relative to their container, use the
fa-lg (33% increase), fa-2x,
fa-3x, fa-4x, or fa-5x classes.
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5xالقوائم المنسدلة سهلة وجميلة
Use
fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment.
Especially useful in things like nav lists & list groups.
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> الرئيسية</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> العاب</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> تطبيقات</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> برامج</a>
</div>
تضمين ايقونات في كل مكان
- List icons
- can be used
- as bullets
- in lists
Use
fa-ul and fa-li to easily replace default bullets in unordered lists.<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
ملاحظاتك أجمل
…tomorrow we will run faster, stretch out our arms farther… And then one fine morning—
So we beat on, boats against the current, borne back ceaselessly into the past.
Use
fa-border and pull-right or pull-left for easy pull quotes or
article icons.
<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
امثلة اخرى
الاكواد التالية هي امثلة لكيفية عملها مثل أعلاها تماماً
fa-spinner,
fa-refresh, fa-cog.
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cogg fa-spin"></i>
CSS3 animations aren't supported in IE8 - IE9.
تدوير الايقونات كيف تشاء
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
بإستخدام هذه الرموز يمكنك تدويرها حسب الدرجات
fa-rotate-* و fa-flip-*<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
كل ماتحتاج من ايقونات حتى الاجتماعية يمكنك تخصيصها
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
To stack multiple icons, use the
fa-stack class on the parent, the fa-stack-1x
for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse
can be used as an alternative icon color. You can even throw larger icon classes on the parent
to get further control of sizing.
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-cameraتريد البدأ مع هذا الخط
شكرا لخي العزيز ينتظرك شرح اخر لموقع مثل هدا وهو بوتيتراب
بتوفيق الله
العفو أخي مسلم إن شاء الله القادم أجمل
أزال المؤلف هذا التعليق.
لطالما بحث عن هذا الشرح واليوم بالصدفة وجدته مطروح في قسم المساعدة لكن للاسف ;-( لم استطع اضافتة لان الاقسام مضافة عن طريق التخطيط، اليس هناك حل :-?
أضفها من خلال قائمة منسدلة داخل القالب وقم بحذف التي بالتخطيط قبل تطبيق هذه الأمور أخي يجب بأن يكون لديك خبرة في هذه المجلالات
كيفية تغير الالوان
يمكن تغيير لون هذه الايقونات كما بكل سهولة كما هي أدناه:
الأصل
<i class="fa fa-apple" ></i>
بألوان
<i class="fa fa-apple" style="color:green"></i>
<i class="fa fa-apple" style="color:#038103"></i>
أو
<a href="# " style="color:green"><i class="fa fa-apple"></i> ابل تفاحة</a>
<a href="# " style="color:#038103"><i class="fa fa-apple"></i> ابل تفاحة</a>
شكرا اخى
العفو محمد