سعید حسینی

اختصاص آیکن به لینک ها با CSS

1 پست در این موضوع قرار دارد

سلام

در این آموزش با کد CSS برای لینک های خاصی که مد نظر دارید میتوانید آیکن اختصاص بدهید:

90547048393147106845.jpg

در این مثال عکس ها با پسوند png در پوشه demo-images قرار میگیرند.

آدرس های خاص اینترنتی مثل “//:http://”, “https://” , “mailto:” , "ftp"

کد HTML:


<div class="example1">
<ul>
<li><a href="http://www.google.com">Visit a website</a></li>
<li><a href="https://www.google.com">Visit a secure website</a></li>
<li><a href="mailto:email@email.com">Send an email</a></li>
<li><a href="ftp://www.google.com">Connect to an FTP server</a></li>
<li><a href="magnet:…">Download from a magnet link</a></li>
</ul>
</div>

کد CSS:


div.example1 ul {
list-style-type: none;
}

div.example1 ul li a[href^="http://"] {
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}

div.examples1 ul li a[href^="https://"] {
background-image: url(demo-images/lock.png);
}

div.example1 a[href^="mailto:"] {
background-image: url(demo-images/mail.png);
}

div.example1 a[href^="ftp://"] {
background-image: url(demo-images/folder_ftp.png);
}

div.example1 a[href^="magnet"] {
background-image: url(demo-images/magnet.png);
}

در فایل های خاص مثل pdf”, “.docx” , “.mp3″

کد HTML:


<div class="example2">
<ul>
<li><a href="http://www.css3.info/demos/files/1.pdf">A link to a PDF document</a></li>
<li><a href="http://www.css3.info/demos/files/1.docx">A link to a Word document</a></li>
<li><a href="http://www.css3.info/demos/files/1.xlsx">A link to an Excel document</a></li>
<li><a href="http://www.css3.info/demos/files/1.mp3">A link to an MP3 file</a></li>
<li><a href="http://www.css3.info">A normal web link</a></li>
</ul>
</div>

کد CSS:


div.example2 ul {
list-style-type: none;
}

div.example2 ul li a {
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}

div.example2 ul li a[href$=".pdf"] {
background-image: url(demo-images/pdf.png);
}

div.example2 ul li a[href$=".docx"] {
background-image: url(demo-images/page_white_word.png);
}

div.example2 ul li a[href$=".xlsx"] {
background-image: url(demo-images/page_white_excel.png);
}

div.example2 ul li a[href$=".mp3"] {
background-image: url(demo-images/audio.png);
}

دامنه های خاص اینترنتی مانند google.com و yahoo.com

کد HTML:


<div class="example3">
<ul>
<li><a href="http://www.google.com">A link to Google</a></li>
<li><a href="http://www.twitter.com/css3">A link to a Twitter profile</a></li>
<li><a href="https://www.facebook.com/css3.info">A link to a Facebook page</a></li>
<li><a href="http://www.yahoo.com">A link to Yahoo</a></li>
<li><a href="http://www.bing.com">Any other link</a></li>
</ul>
</div>

کد CSS:


div.example3 ul {
list-style-type: none;
}

div.example3 ul li a {
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}

div.example3 ul li a[href*="google.com"] {
background-image: url(demo-images/google.png);
}

div.example3 ul li a[href*="twitter.com"] {
background-image: url(demo-images/twitter.png);
}

div.example3 ul li a[href*="facebook.com"] {
background-image: url(demo-images/facebook.png);
}

div.example3 ul li a[href*="yahoo.com"] {
background-image: url(demo-images/yahoo.png);
}

موفق و پیروز باشید.

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط koolfayfer
      سلام به همه
      من یه div دارم که پیشفرض به سمت راست میچرخه به مدت نامحدود
      وقتی روش هاور میشی به اندازه یک ثانیه معکوس به سمت چپ میچرخه یه بار!
      حالا اگه کسی بیشتر از یک ثانیه هاور بمونه انیمیشن چرخش اولیه به خاطر وجود انیمیشن هاور stop میشه و میخوام اگه در css ترفندی هست بعد از گذشت یک ثانیه هاور شدن آنهاور بشه یا هر چیز دیگه که باعث بشه انیمیشن پیشفرض کار کنه
      اگه css نبود کسی با جیکوئری میدونه؟
    • توسط amzzm75
      باسلام و احترام قالبی که من استفاده میکنم تعداد زیادی فایل css و javascript داره به طوری که تعداد درخواست ها به سرور منو زیاد کرده به طوری که وقتی با gtmetrix تست میکنم میزنه 150 درخواست به سرور و به فشرده نبودن و تعداد زیاد فایل ها ایراد میگیره من یه بار اومدم با سایتایی که این فایلا رو فشرده میکنن فشردشون کردم اما فونت و ظاهر بعضی قسمت های سایت بهم ریخت و مجبور شدم به حالت قبل برش گردونم موندم چیکار کنم که تعداد فایل ها کم بشه تا سرعت لود سایت بالاتر بره و سایت بهینه بشه لطفا راهنمایی کنین 
      آدرس سایت من:umagazine.ir
    • توسط chemist
      با سلام و عرض خسته نباشید؛
      بنده از این کد CSS در وب سایت استفاده کرده ام؛
      #left-menu i img { max-width:24px; max-height:24px; } در مرورگر کروم موبایل تصاویر در اندازه واقعی عکس ها نمایش داده می شود! (از ماکزیمم طول و عرض تعیین شده تبعیت نمی کند) ولی در مابقی مرورگرها با ابعاد تعیین شده نمایش داده می شود. آیا برای سازگاری کامل با تمامی مرورگرها باید تغییری در کد اعمال کنم؟
      ممنون میشم راهنمایی بفرمائید.
      با تشکر
    • توسط mehr-cs
      سلام
      منمیخوام یه قسمت تحت عنوان تاریخچه داشته باشم به این صورت که، تو یک باکس کوچیک تمامی حروف الفبا رو داشته باشم و لوگوی کل تاریخچه ی برند هام تو صفحه باشه و کاربر بعد از کلیک کردن روی هر کدوم از حروف الفبا، کلیه تاریخچه هایی که با اون حرف شروع میشه رو ببینه !
      دوستان راهنمایی میکنن ؟
    • توسط mihanpsd
      سلام میخوام وقتی موس به سمت محصولات حرکت داده میشه ، عکس hover محصول نمایش داده نشه و حرکت نکنه . همون عکس بصورت ثابت باقی بمونه .
      ممنون میشم راهنمایی کنید .
      http://mashinno.com