السلام عليكم ورحمه الله وبركاته
شرح حصرى لمكتبه الخطوط الجديدة Linearicons او لاين ايكون
بعد غيبه اطالت اعود اليكم بشى نتمنى ان يعجبكم والشرح هنا سيكون حصرى والان سندخل فى الموضوع طبعا الكل يعلم اشهر مكتبه خطوط لدينا الان وهى fontawesome لكن احيانا لا تلبى جميع متطلبتنا لهذا وبفضل الله تفتح لنا مواقع تساعدنا وتزودنا بايقونات جديده وبشكل مختلف واليوم اتى لكم بمكتبه جديده وهى مكتبه لاين ايقون او بالانجليزية LINE ICON وحتى لا اطيل عليكم بالنبدء الشرحشرح حصرى لمكتبه الخطوط الجديدة Linearicons او لاين ايكون
الخطوات
1- اولا منظر عام للموقع والايقونات المتاحه للتحميل مجانا
2- توجه الى الموقع من خلال هذا الرابط Linearicons
3- ستفتح لك صفحة اضغط على كلمة DOWNLOAD كما بالصورة
4- بعد التحميل يصبح لدينا ملف مضغوط كما هو بالصوره امامنا قم الان بفك الضغط
5- بعد فك الضغط يظهر لنا فولدر جديد بداخله الملفات التى امانا بالصوره.
6- المجلد الذى يهمنا هو Web Font ادخل عليه ستجد هذه المجلدات الموضحة امانا بالصوره
7- قم الان برفع فولدر fonts و ملف style.css الى مجلد الاستايل المراد العمل عليه
8- الان سنقوم بوضع كود الاستدعاء وذلك من خلال توجهك الى القالب headinclude فى كان منتداك vbulletin او PAGE_CONTAINER ده لو منتداك xenforo او ابحث عن <head> ثم ضع اسفله هذا الكود او تحت التاج
كود:
<link href="smart-free/style.css" rel="stylesheet" type="text/css" />
8- يتبقى لنا كود الايقونه نفسها من خلال صفحة الايقونات اضغط على اى ايقونه كما بالصوره
9- ستنقلك الى صفحة الكود كما بالصوره
10- سنقوم بوضع مثال توضيحى اولا الكود html سيكون على هذا الشكل
كود:
<span class="lnr lnr-checkmark-circle"></span>
كود:
.lnr-checkmark-circle {
color: #0F52BA;
font-size: 20px;
}
كود:
<font style="margin:4px;line-height:50px;color:#f00;font-size: 20px;">
<span class="lnr lnr-checkmark-circle"></span>
شرح حصرى لمكتبة الخطوط الجديدة linearicons
</font>