صفحه اصلی / ▼آموزشLearning / –3 آموزش سی اس اس Learning CSS3 / اختصاص آیکن به لینک ها با CSS

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

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

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

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

در ادامه مطالب همراه باشید.

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

کد HTML:

<div>
<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:

</pre>
<div>
<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>
<pre>

کد 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:

</pre>
<div>
<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>
<pre>

کد 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);
}

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

درباره مدیر سایت

سعید حسینی هستم کارشناسی مهندسی نرم افزار مدیر سایت و علاقه مند به فناوری اطلاعات و تکنولوژی های نو علاقه مند به وردپرس و جوملا و مدتی افتخار همکاری با انجمن پشتیبانی وردپرس پارسی را نیز داشتم. مهارتهای نرم افزاری • وب : PHP , HTML , Java script , JQuery , asp , CSS & CSS3 , Dreamweaver • برنامه نویسی : Delphi , C ++ , C sharp • بانک اطلاعاتی : SQL Server , MySQL , Oracle • طراحی : Photoshop ورزش های مورد علاقه ام شنا و فوتبال و دوچرخه سواری هستند.

همچنین بخوانید

اضافه کردن متن به CSS با خاصیت Content

اگر برای شما هم سوال پیش آمده که چطوری با css متنی را اضافه کنیم …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *