چه تکنولوژی می‌خواهید یاد بگیرید؟

نظرات و انتقادات خود را با ما در میان بگذارید.

آپدیت روزانه

بیش از 1000 پست آموزشی

نیازهای روز

نمایش آیکن کنار لینک‌ها در صفحات وب - بخش 1

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

کد HTML:

به منظور عدم تداخل در بخش‌های وب‌سایت پیشنهاد می‌شود بخش از وب‌سایت که قصد به نمایش آیکن در کنار لینک‌ها را دارید در یک بدنه مشخص تعریف سپس از طریق انتخابگر فیلتر بر روی آن صورت گیرد:

<div class="content">
  <a href=http://github.com>GitHub</a>
  <a href=http://css-tricks.com>CSS-Tricks</a>
  <a href="http://www.omidnasri.com">Omid Nasri</a>
</div>

کد CSS:

با بکارگیری ^ در انتخابگر، کلیه لینک‌های که اول خاصیت href یا مقصد از http استفاده شده باشد انتخاب و تغییرات بر روی آنها اعمال خواهد شد.

.content a[href^="http"] {
  padding-left: 19px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: left center;
}
.content a[href*="github.com"]{
  background-image: url(http://www.google.com/s2/favicons?domain=github.com);
}
.content a[href*="css-tricks.com"]{
  background-image: url(http://www.google.com/s2/favicons?domain=css-tricks.com);
}
.content a[href*="omidnasri.com"]{
  background-image: url(http://www.google.com/s2/favicons?domain=www.omidnasri.com);
}

.content a  {
  display: block;
  margin: 10px;
  text-decoration: none;
}

یکی از کاربردهای استفاده از سرویس Google Favicons، زمانی به چشم می‌خورد که لینک آیکن در هدر سایت مقصد یافت نشود از این رو سرویس گوگل یک ایکن پیشفرض بدین منظور بکار می‌گیرد تا تصویر شکسته در کنار لینک نمایان نگردد البته در پست تکه کدهای مفید جی‌کوئری بخش دوم، تکه کدی در این خصوص معرفی گردید که به موجب آن تصاویر شکسته ترمیم خواهند شد.

خروجی:

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


...

امید نصری

0 نظر:

تعداد دیدگاه‌های کاربران : 0 دیدگاه
مهمان گرامی! برای ارسال نظر نیاز است وارد سایت شوید.


You must ورود to comment.