استفاده از ایکونهای fortawesome در کنار لینکهای صفحه

2/19/2016 MVC
2522

برای زیبا سازی لینکها دوست داشتم لینکی در کنار هر متنی که برای صفحه ای دیگر-معمولا صفحات خارج از وب سایت- ادرس دهی شده بود نشان داده شده باشد.

پس از بررسی به یک سری css  برخوردم که با استفاده از یک عکس این کار رو نشان میداد اما من دوست داشتم از فونتهای fortawesome در کنار لینک درون متن نمایش دهده شود

برا استفاده از عکس میتوانید از این css  استفاده کرد ، 

a[href^='http:'] {
display : inline-block;
padding-right : 20px;
background : transparent url(~/Image/2gb.jpg) center right no-repeat;
}

این css را از سایتی دیگر اینجا گذاشتم اما برای اینکه بتوانید از فونتهایfortawesome استفاده کنید نیاز دارید تا ایتدا کد هر ایکون را داشته باشد، برای داشتن تمامی کد ها به صورت یکجا میتوانید از این سایت استفاده کنید. و یا پس از ورود به سایت خودfortawesome روی هر ایکن کلیک کنید و در صفحه ای که نمایش داده میشود زیر لینک کد مربوطه به صورت یونیکد نمایش داده شده ، و از آن استفاده کنید.

و در ادامه این قطعه را در css که به سایت وصل کرده اید اضافه کنید.

a[href^='http:']:before {
    content: "\f0c1";
    font-family: FontAwesome;
   display : inline-block;
padding-right : 5px;
padding-left : 5px;
    top:0;
}

البته به یاد داشته باشید که باید فونتهای مربوط به fortawesome و css  را به پروژه اضافه کرده باشید