السلام عليكم ورحمه الله وبركاته
بعد غيبه اطالت اعود اليكم بشى نتمنى ان يعجبكم والشرح هنا سيكون حصرى والان سندخل فى الموضوع طبعا الكل يعلم اشهر مكتبه خطوط لدينا الان وهى fontawesome لكن احيانا لا تلبى جميع متطلبتنا لهذا وبفضل الله تفتح لنا مواقع تساعدنا وتزودنا بايقونات جديده وبشكل مختلف واليوم اتى لكم بمكتبه جديده وهى مكتبه لاين ايقون او بالانجليزية LINE ICON وحتى لا اطيل عليكم بالنبدء الشرح
الخطوات
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>
و كود css لتغيير الحجم واللون سيكون على هذا الشكل
كود:
.lnr-checkmark-circle {
color: #0F52BA;
font-size: 20px;
}
11- الان مثال قمت بوضعه
كود:
<font style="margin:4px;line-height:50px;color:#f00;font-size: 20px;">
<span class="lnr lnr-checkmark-circle"></span> شرح حصرى لمكتبة الخطوط الجديدة linearicons
</font>
الصوره