نمایش آیکون در کنار لینک ها در صفحات وب با استفاده از CSS

نمایش آیکون در کنار لینک ها در صفحات وب با استفاده از CSS
یک شنبه 14 دی 1393  7:36 PM

حتماً در بسیاری از سایت ها مانند ویکی پدیا مشاهده کرده اید که در کنار لینک های خروجی آیکونی نمایش داده می شود و از این طریق کاربران متوجه این می شوند این لینک به سایت یا صفحه وب خارجی اشاره می کند و با کلیک بر روی آن از ویکی پدیا خارج می شوند. همچنین در بسیاری از سایت های دانلود و کتابخانه های آنلاین در کنار لینک به فایل ها برای دانلود و همچنین لینک به کتاب های الکترونیک آیکون فرمت آن فایل نمایش داده می شود که از این طریق کاربران از فرمت و پسوند فایل مورد نظر آگاه می شوند. جالب است بدانید همه این کار ها به صورت کاملاً خودکار با استفاده از یکسری ترفندها در CSS نمایش داده می شود.
در این آموزش به چگونگی اضافه کردن خودکار آیکون به لینک های موجود در صفحه های سایت یا وبلاگ خود با استفاده از تکنولوژی CSS می پردازیم و می توانید به آسانی با استفاده از ترفند های معرفی شده در این آموزش ظاهر زیبا تری برای صفحات سایت یا وبلاگ خود با آیکون دار کردن لینک های آن درست کنید.

اضافه کردن آیکون به لینک های خروجی در سایت خود با CSS
برای اینکه در کنار لینک های خروجی سایت خود یک آیکون که معمولاً همچین ( ) شکلی نیز دارند کافی است در کدهای CSS صفحات سایت یا وبلاگ خود کدهای زیر را قرار دهید. با استفاده از این کد از این به بعد کل لینک های خروجی موجود در سایت یا وبلاگ شما به صورت خودکار در کنار خود آیکونی را نمایش می دهد که این آیکون ها به بازدید کنندگان سایت شما می فهمانند که با کلیک بر روی آن ها از سایت شما خارج می شوند و در اصل بر روی یک لینک خارجی کلیک می کنند.

 

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

 

در کد بالا از علامت ^ استفاده شده است که باعث می شود این تنظیمات تنها برای لینک هایی اعمال شود که در اول خاصیت href یا مقصد خود از http استفاده شده باشد.

اضافه کردن آیکون ایمیل در کنار آدرس های ایمیل موجود در صفحات وب
یکی دیگر از کاربردهای علامت ^ که در حقیقت می تواند اول مقدار یک خاصیت خاص را که ما مشخص می کنیم چک کند ، استفاده از آن برای تشخیص لینک هایی است که به یک پست الکترونیک اشاره می کنند. مثلاً اگر بخواهیم همچین ( ) آیکونی را به صورت خودکار در کنار آدرس ایمیل های موجود در صفحه خود نمایش دهیم کافی است کد زیر را به کدهای CSS صفحه خود اضافه کنیم.

 

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

همانطور که می بینید در این کدها تعیین شده است که لینک هایی که به ارسال ایمیل به یک آدرس پست الکترونیکی خاص اشاره می کنند در کنار آن ها آیکون نمایش داده شود.

نمایش فرمت فایل ها با نمایش آیکون مرتبط
یکی دیگر از استفاده هایی که از CSS برای نمایش آیکون در کنار لینک به فایل های مختلف استفاده می شود برای نمایش آیکون مرتبط با فایل مربوطه است به این صورت که مثلاً اگر لینک ما به یک فایل فشرده با فرمت Zip یا Rar اشاره می کرد آیکون فایل های فشرده ( ) در کنار آن نمایش داده شود. برای اینکار می توانیم از کدهای زیر در CSS صفحات سایت خود استفاده کنیم.

 

a[href$='.zip'], a[href$='.rar'] {
padding-right: 18px;
background: transparent url(http://noor119.persiangig.com/2-2gb.jpg) no-repeat center right;
}

 

به عنوان یک مثال دیگر با استفاده از کدهای زیر سعی می کنیم در کنار تمام لینک های صفحات وب خود که به یک کتاب الکترونیک با پسوند PDF اشاره می کنند آیکون برنامه Adobe Reader را اضافه کنیم ( ) تا کاربران ما آسان تر بتوانند اسناد و کتاب های الکترونیک را در صفحات وب ما پیدا کنند.

 

a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(http://noor119.persiangig.com/2-3gb.jpg) no-repeat center right;
}

 

همانطور که می بینید در دو مثال بالا از علامت $ که برای چک کردن آخر یک مقدار برای خاصیت خاصی در لینک ها ی صفحات ما ( ) استفاده شده است. از این علامت برای تشخیص انواع پسوند ها و فرمت های موجود در صفحات وب خود نیز مانند فایل های Doc ، txt ، PNG ، Jpeg و … نیز می توانید استفاده کنید تا لینک های دانلود و لینک هایی که به فایل خاصی اشاره می کنند را در صفحات وب خود زیباتر و مشخص تر برای بازدید کنندگان سایت خود کنید.

اضافه کردت متنی خاص در جلوی لینک های سایت یا وبلاگ
اما شاید بخواهید در جلوی لینک های خود متن هایی که برای راهنمایی بیشتر استفاده می شوند را اضافه کنید. مثلاً بعد از تمامی لینک های خود به کتاب های الکترونیک با پسوند PDF نوشته شود ( برای نمایش این فایل نیاز به برنامه Adobe Reader دارید. ) تا بازدید کنندگان سایت یا وبلاگ شما که با این فرمت آشنایی ندارند بتوانند براحتی از آن استفاده کنند. برای این کار نیز می توانید از کدهای CSS زیر استفاده کنید.

 

a[href$='.pdf']:after {
content: "برای باز کردن این فایل نیاز به برنامه Adobe Reader دارید."
}

 

همانطور که می بینید در کدهای بالا براحتی توانستیم دیگر محتوای مورد نظر خود را نیز مانند آیکون ها به لینک های مورد نظر خود به وسیله استفاده از تکنولوژی CSS اضافه کنیم. با استفاده از کد بالا در کدهای CSS خود متوجه می شوید که متن مورد نظر ما بعد از لینک های فایل PDF صفحه وب ما نمایش داده می شود ، اگر خواستید متن مورد نظر قبل از لینک نمایش داده شود کافی است بجای after از before استفاده کنید.