مجموعة ايقونات افلات بصيغة CSS مجانية للتضمين في الويب

السلام عليكم ورحمة الله وبركاته

في درسنا اليوم سوف نتعرف على طريقة تركيب مجموعة من ايقونات الفلات وبصيغة CSS  ويحتاجها كل مصمم وهذه الايقونات سوف تلاحظون بأن فيها لمسة أحترافية  جمالية ، وفريق عمل المدونة عمل على تذليل هذه ايقونات بحيث يستطيع أي أي منا أن يستخدمها بكل بساطة .

::: كيفية تركيب هذه الإيقونات :::

1- ادخل إلى مدوناتك واختر لوحة التحكم .

2- من لوحة التحكم اختر قالب ثم اضغط على تحرير قالب .

3- ابحث عن الوسم :

4- اضف الكود التالي فوقه .

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/> 

5-  بعد ذلك ابحث عن الوسم :  

6- اضف الكود التالي فوقه .

 .sc-network a{color:#fff;width:50px;height:50px;display:block;margin:2px;text-align:center;float:left;font-size:40px}
.sc-network a:hover{opacity:0.5}
.sc-network i{line-height:50px}
.fac{background:#3B5998}.twi{background:#39A9E0}.gog{background:#D14836}.rss{background:#FF8300}.yut{background:#CD332D}.lin{background:#007FB1}.git{background:#4183C4}.pin{background:#CB2027}.ins{background:#3F729B}.fli{background:#0063DB}.tum{background:#2C4762}.stu{background:#EB4924}.dig{background:#14589E}.red{background:#FF4500}.dri{background:#EA4C89}.wor{background:#21759B}.vim{background:#4BF}.del{background:#3274D1}.dev{background:#4B5D50}.and{background:#A4C639}.apl{background:#B9BFC1}.sky{background:#00AFF0}.eml{background:#888}.jsf{background:#4679A4}.cdp{background:#000}.drp{background:#3277E3}.ht5{background:#E44D26}.cs3{background:#1572B6}.dru{background:#2AA9E0}.jom{background:#000} 

7- احفظ القالب .

::: كيفية طريقة أختيار الشكل الذي نريده :::

1- نضيف أي من الأكواد التالي كما في الصورة التالية لنحصل على الشكل الذي تريده :

- الشكل الأول نضيف هذا الكود :

 .sc-network a{ border-radius:5px; } 

- الشكل الثاني نضيف هذا الكود :

 .sc-network a{ border-radius:100%; } 

- الشكل الثالث نضيف هذا الكود :

 .sc-network a{border-radius:15px 0px 15px; } 

::: الآن نأتي إلى كيفية أستخدام هذه الأيقوتات في مواضيعنا :::

1- استخدم هذا الكود في وضعية HTML .

 <div class="sc-network">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div> 

- ملاحظة / استبدل هذه  العلامة( # ) برابط توجيه الأيقونة .

::: هنالك شكل آخر من أيقونات الفلات مثل هذا الشكل :::

::: وطريقة استخدمها كما استخدمنا الأيقونات السابقة ، ولكن يختلف في هذه ايقونات فقط كود CSS  .

 .sc-network a{background:#666;color:#fff;width:50px;height:50px;display:block;margin:2px;text-align:center;float:left;font-size:40px}
.sc-network a:hover{opacity:0.5}
.sc-network i{line-height:50px} 

::: أما طريقة اختيار الشكل الذي نريده، أيضاً كما شرحنا  في الأيقونات  السابقة.

::: أما بالنسبة إلى طريقة استخدمها في مواضيعنا، أيضا تستخدم  في وضعية HTML ، كما شرحنا في الأيقونات السابقة.