كيفية استخدام خط الوسوم في مدونات بلوجر

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

في درسنا اليوم سوف نتعرف  على طريقة استخدام خط الوسوم في مدوناتنا ، وكما تعلم بأن خط الوسوم من الخطوط الرائعة   والذي يغنينا عن مشقة البحث عن الايقونات  ، ومن مميزات هذا الخط أنك تستطيع أن تتحكم به من حيث تكبير وتصغير الإيقونة أو اضافة التأثير عليها أو التحكم بإتجاه الإيقونة  ونحن شرحنا ذلك ويمكنك مشاهدة الشرح من هـــــنــــا.

::: نأتي الآن إلى طريقة  خط الوسوم على مدوناتنا :::

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

2- من لوحة التحكم اختر قالب ، ثم تحرير قالب .

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

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

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 

5- نحن اخترنا لكم الإيقونات الأكثر استخداماً ، وتستطيع أختيار الإيقونة التي تناسبك وتستخدمها في وضعية HTML في مشاركاتك أو استخدامها في تصميم إضافة معينة .

 <div id="fawesomeicons">
<a href="هنا ضع رابط التوجيه" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="هنا ضع رابط التوجيه" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="هنا ضع رابط التوجيه" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="هنا ضع رابط التوجيه" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
<a href="هنا ضع رابط التوجيه" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="هنا ضع رابط التوجيه" title="Bloglovin" target="_blank" rel="nofollow"><i class="fa fa-heart"></i></a> 
<a href="هنا ضع رابط التوجيه" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>
<a href="هنا ضع رابط التوجيه" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
<a href="هنا ضع رابط التوجيه" title="Youtube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a>
</div>

6- كيفية التحكم بالإيقونة من حيث الشكل وخلفية الإيقونة ولونها والتأثير عليها . ونحن اخترنا لكم بعض الأكواد التي تتحكم بالإيقونة من حيث الشكل ولون والتأثير .

:: نأخذ الشكل الأول ::

والكود الذي يتحكم بالإيقونة من حيث الشكل ولون والتأثير هو كود CSS  ، طريقة استخدامه :

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

2- من لوحة التحكم اختر قالب ، ثم تحرير قالب .

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

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

 #fawesomeicons {
text-align: center;
}
#fawesomeicons a {
background: ضع هنا لون الخلفية للإيقونة;
color: ضع هنا لون الإيقونة;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: ضع هنا لون التأثير على الإيقونة;
} 

::: للإستخدام كود اللوان إذا لم يتوافر في مدونتك من هـــنـــا .

- التغيرات مشروحة داخل الكود .

::: نأتي الآن إلى الشكل الثاني :::

- طريقة التركيب نفس طريق تركيب الشكل الأول .

 #fawesomeicons {
text-align: center;
}
#fawesomeicons a {
background: هنا ضع لون خلفية الإيقونة;
color: هنا ضع لون الإيقونة;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: هنا ضع لون التأثير على الإيقونة;
} 

::: الشكل الثالث لهذه الإيقونات :::

 #fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px solid ضع لون اطار الإيقونة;
color: ضع هنا لون الإيقونة;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: ضع هنا لون التأثير على الإيقونة;
} 

::: الشكل الرابع من أشكال أيقونات خط الوسوم :::

 #fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px solid ضع هنا لون اطار الإيقونة;
color: ضع هنا لون الإيقونة;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: ضع هنا لون التأثير على الإيقونة;
} 

::: الشكل الأخير لإيقونات خط الوسوم :::

 #fawesomeicons {
text-align: center;
}
#fawesomeicons a {
color: ضع هنا لون الإيقونة;
display: inline-block;
font-size: 23px;
margin: 0 6px 6px;
}
#fawesomeicons a:hover{
background: ضع هنا لون التأثير على الإيقونة;
}.