هيلبرنت | Helpernt

هيلبرنت | Helpernt (https://www.helpernt.com/vb/index.php)
-   ركن تطوير المواقع (https://www.helpernt.com/vb/forumdisplay.php?f=88)
-   -   لاول مره شرح حصرى لمكتبه الخطوط الجديدة Linearicons او لاين ايكون (https://www.helpernt.com/vb/showthread.php?t=8211)

abo-karim 11-10-2018 01:26 PM

لاول مره شرح حصرى لمكتبه الخطوط الجديدة Linearicons او لاين ايكون
 
السلام عليكم ورحمه الله وبركاته
بعد غيبه اطالت اعود اليكم بشى نتمنى ان يعجبكم والشرح هنا سيكون حصرى والان سندخل فى الموضوع طبعا الكل يعلم اشهر مكتبه خطوط لدينا الان وهى 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>

الصوره


S!L3NT H!LL 11-10-2018 01:43 PM

رد: لاول مره شرح حصرى لمكتبه الخطوط الجديدة Linearicons او لاين ايكون
 
يسعدني ويشرفني اكون اول رد على موضوعك اخي ابو كريم
ونسال الله ان تكون عودة قوية لك.

abo-karim 11-10-2018 01:56 PM

رد: لاول مره شرح حصرى لمكتبه الخطوط الجديدة Linearicons او لاين ايكون
 
وانت اول شخص لجأت له عند غلق المنتدى


يسعدنى دائما مروركم

for sat 11-10-2018 11:54 PM

رد: لاول مره شرح حصرى لمكتبه الخطوط الجديدة Linearicons او لاين ايكون
 
عاشت الايادي أبوكريم
لكن الكل يستعمل مكتبة font awsome فما الفرق؟

هيلبرنت 11-11-2018 10:17 AM

رد: لاول مره شرح حصرى لمكتبه الخطوط الجديدة Linearicons او لاين ايكون
 
يعطيك الف عافيه ايقونات شكلها حلو فعلا

MEDO3ABED 11-11-2018 01:53 PM

رد: لاول مره شرح حصرى لمكتبه الخطوط الجديدة Linearicons او لاين ايكون
 
جزاك الله كل خير على الموضوع المميز والايقونات الرائعة واصل إبداعك

maaidni 11-11-2018 03:31 PM

رد: لاول مره شرح حصرى لمكتبه الخطوط الجديدة Linearicons او لاين ايكون
 
جميل جدا وشكرا على الشرح

هيلبرنت 11-13-2018 08:24 PM

رد: لاول مره شرح حصرى لمكتبه الخطوط الجديدة Linearicons او لاين ايكون
 
اقتباس:

المشاركة الأصلية كتبت بواسطة for sat (المشاركة 23476)
عاشت الايادي أبوكريم
لكن الكل يستعمل مكتبة font awsome فما الفرق؟

حسب معرفتى مكتبة font awsome طبعا اكبر مكتبه مجانيه حتى الان

samzad 11-30-2018 06:18 PM

رد: لاول مره شرح حصرى لمكتبه الخطوط الجديدة Linearicons او لاين ايكون
 
تسلم ايدك ابوكريم

هيلبرنت 01-20-2019 09:58 PM

رد: لاول مره شرح حصرى لمكتبه الخطوط الجديدة Linearicons او لاين ايكون
 
شرح مكتبة جديدة من هنا طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع


الساعة الآن 05:07 PM

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By Almuhajir