آیکون ها و لینک ها در CSS

آیکون ها

اگر در زمینه ی CSS تازه کار هستید ممکن است از خودتان بپرسید چطور می توانیم آیکون های دلخواهمان را به صفحات HTML اضافه کنیم؟ راه کار ساده ی آن استفاده از زبان CSS و آیکون های آن است. البته راه های مختلفی برای اضافه کردن آیکون ها وجود دارد اما ساده ترین و محبوب ترین روش آن استفاده از کتابخانه های آیکون مانند Font Awesome است.

روش کار به این صورت است که شما نام کلاس یک آیکون را به عنصر مورد نظر خود اضافه می کنید و سپس در خروجی صفحه ی HTML، آیکون ها را خواهید دید! بیایید دو مورد مهم از انواع آیکون ها را بررسی کنیم.

آیکون های Font Awesome

برای استفاده از کتابخانه ی Font Awesome باید لینک زیر را به قسمت <head> سایت خود اضافه کنید:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

و دیگر نیازی به نصب یا دانلود نخواهید داشت. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>

<p>Some Font Awesome icons:</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

<p>Styled Font Awesome icons (size and color):</p>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که مشاهده می کنیم با اضافه کردن نام یک کلاس، آیکون ها در خروجی نمایش داده می شوند. همچنین از آن جایی که این آیکون ها وکتور های گرافیکی محسوب می شوند، به راحتی با CSS استایل دهی خواهند شد. در ردیف دوم از مثال بالا آیکون ابر را به چند رنگ و شکل و اندازه ی مختلف در آورده ایم!

سوال: از کجا بدانم نام کلاس آیکون ها چیست؟ چه کلاسی را به عنصر مورد نظرم اضافه کنم؟

پاسخ: با مراجعه به وب سایت Font Awesome می توانید به نام این کلاس ها و آموزش کامل آن دست پیدا کنید. معمولا این نام ها با fas یا far یا fal و یا fab شروع می شوند که هر کدام معانی خاص خودش را دارد.

آیکون های Bootstrap

برای استفاده از کتابخانه ی Bootstrap باید لینک زیر را به قسمت <head> سایت خود اضافه کنید:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="container">

<p>Some Bootstrap icons:</p>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<br><br>

<p>Styled Bootstrap icons (size and color):</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

مشاهده ی خروجی در JSBin

تمام موارد ذکر شده برای Font Awesome، برای Bootstrap نیز صادق است.

آیکون های Google

برای استفاده از کتابخانه ی Google باید لینک زیر را به قسمت <head> سایت خود اضافه کنید:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

برای مثال به کد زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<p>Some Google icons:</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>

<p>Styled Google icons (size and color):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>

</body>
</html>

مشاهده ی خروجی در JSBin

لینک ها

لینک ها در زبان HTML به صورت خام و پیش فرض هستند بنابراین ظاهر آنچنان زیبایی هم ندارند اما ما می توانیم با استفاده از CSS ظاهر این لینک ها را تغییر بدهیم تا باعث جذب مخاطب شویم.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: hotpink;
}
</style>
</head>
<body>

<p><b><a href="https://www.roxo.ir/plus" target="_blank">This is a link to Roxo.ir</a></b></p>

</body>
</html>

مشاهده ی خروجی در JSBin

در این مثال با استفاده از خصوصیت color رنگ لینک را به صورتی روشن تغییر داده ایم. این تنها یکی از خصوصیت هایی است که می توانید از طریق آن ظاهر لینک ها را تغییر دهید. همچنین لینک ها معمولا چهار وضعیت مختلف دارند:

a:link : لینک هایی که هنوز وارد آن ها نشده اید
a:visited : لینک هایی که حداقل یک بار روی آن ها کلیک کرده ایم
a:hover : زمانی که موس را روی یک لینک می برید
a:active : لحظه ای که روی لینک کلیک می کنید (فشردن کلیک چپ)

ما می توانیم تمامی این چهار حالت را تغییر دهیم:

<!DOCTYPE html>
<html>
<head>
<style>
/* لینکی که وارد آن نشده ایم */
a:link {
  color: red;
}

/* لینکی که وارد آن شده ایم */
a:visited {
  color: green;
}

/* آمدن موس روی لینک */
a:hover {
  color: hotpink;
}

/* کلیک کردن روی لینک */
a:active {
  color: blue;
}
</style>
</head>
<body>

<p><b><a href="https://www.roxo.ir/server-response-time/" target="_blank">This is a link to Roxo.ir/plus</a></b></p>

<p dir='rtl'><b>نکته:</b> 
  a:hover باید همیشه بعد از دستورات a:link و a:visited بیاید تا کار کند. در غیر این صورت بی تاثیر خواهد بود
</p>

<p dir='rtl'><b>نکته:</b>
    a:active باید همیشه بعد از دستور a:hover بیاید تا کار کند. در غیر این صورت بی تاثیر خواهد بود

</p>

</body>
</html>

مشاهده ی خروجی در JSBin

در کد بالا این چهار حالت را به این شکل تعریف کرده ایم:

لینکی که وارد آن نشده ایم قرمز خواهد بود
لینکی که وارد آن شده ایم سبز خواهد بود
هنگام آمدن موس روی لینک، لینک صورتی می شود
هنگام کلیک کردن روی لینک، لینک آبی خواهد شد

نکته: دستور a:hover باید همیشه بعد از دستورات a:link و a:visited بیاید تا کار کند. در غیر این صورت بی تاثیر خواهد بود. همچنین a:active باید همیشه بعد از دستور a:hover بیاید، در غیر این صورت آن هم بی تاثیر خواهد بود.

خاصیت های دیگر مانند text-decoration

خاصیت text-decoration یکی دیگر از مواردی است که می توانیم با آن ظاهر یک لینک را تغییر دهیم. در حالت پیش فرض لینک ها underline شده هستند یعنی زیرشان خط کشیده شده است اما اکثرا در دنیای وب مدرن این خط را حذف می کنند:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}
</style>
</head>
<body>

<p><b><a href="https://www.roxo.ir/server-response-time/" target="_blank">This is a link to Roxo.ir/plus</a></b></p>

</body>
</html>

مشاهده ی خروجی در JSBin

میبینید که در حالات مختلف آندرلاین ظاهر می شود و در حالات دیگر خیر. این مسئله به سلیقه ی شما بستگی دارد.

خاصیت بعدی background-color است تا برای لینک ها رنگ پس زمینه بگذاریم:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
} 
</style>
</head>
<body>

<p><b><a href="https://www.roxo.ir/server-response-time/" target="_blank">This is a link to Roxo.ir/plus</a></b></p>

</body>
</html>

مشاهده ی خروجی در JSBin

لینک های پیشرفته تر

حالا می توانیم با ادغام دستوراتی که یاد گرفته ایم و چند دستور دیگر CSS، دکمه های بسیار زیباتر و مدرن تری بسازیم:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>
<p>A link styled as a button:</p>
<p><b><a href="https://www.roxo.ir/server-response-time/" target="_blank">This is a link to Roxo.ir/plus</a></b></p>

</body>
</html>

مشاهده ی خروجی در JSBin

میبینید که لینک ما به صورت یک دکمه درآمده و ظاهر بسیار زیباتری از مثال های قبلی پیدا کرده است.

یک نمونه لینک بسیار پیشرفته تر نیز برایتان آورده ام:

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>لینک های بسیار پیشرفته با استفاده از CSS</title>
  <link href="https://fonts.googleapis.com/css?family=Maven+Pro|Yrsa" rel="stylesheet">
</head>
  
  
  <style>
    .draw-outline {
  display: inline-block;
  padding: 16px 28px;
  border: 2px black solid;
  text-align: center;
  text-decoration: none;
  color: black;
  position: relative;
  transition: border-color 0.35s ease-in-out;
  z-index: 1;
}
.draw-outline:before, .draw-outline:after {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  box-sizing: content-box;
  z-index: -1;
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  padding-left: 2px;
}
.draw-outline:before {
  top: -2px;
  left: -2px;
  border-top: 2px transparent solid;
  border-right: 2px transparent solid;
}
.draw-outline:after {
  bottom: -2px;
  right: -2px;
  border-bottom: 2px transparent solid;
  border-left: 2px transparent solid;
}
.draw-outline:hover {
  color: #37b2b2;
  transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
  border-color: black;
  -webkit-animation: outline-reset 0.35s 1 forwards;
          animation: outline-reset 0.35s 1 forwards;
}
.draw-outline:hover:before {
  -webkit-animation: top-right-border 0.75s 1 0.35s forwards;
          animation: top-right-border 0.75s 1 0.35s forwards;
}
.draw-outline:hover:after {
  -webkit-animation: bottom-left-border 0.75s 1 1.1s forwards;
          animation: bottom-left-border 0.75s 1 1.1s forwards;
}
.draw-outline--tandem:hover:after {
  -webkit-animation: bottom-left-border 0.75s 1 0.35s forwards;
          animation: bottom-left-border 0.75s 1 0.35s forwards;
}
.draw-outline:active:before, .draw-outline:active:after {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

@-webkit-keyframes outline-reset {
  0% {
    border-color: black;
  }
  100% {
    border-color: transparent;
  }
}

@keyframes outline-reset {
  0% {
    border-color: black;
  }
  100% {
    border-color: transparent;
  }
}
@-webkit-keyframes top-right-border {
  0% {
    border-color: #37b2b2;
    width: 0px;
    height: 0;
  }
  50% {
    width: 100%;
    height: 0;
  }
  100% {
    border-color: #37b2b2;
    width: 100%;
    height: 100%;
  }
}
@keyframes top-right-border {
  0% {
    border-color: #37b2b2;
    width: 0px;
    height: 0;
  }
  50% {
    width: 100%;
    height: 0;
  }
  100% {
    border-color: #37b2b2;
    width: 100%;
    height: 100%;
  }
}
@-webkit-keyframes bottom-left-border {
  0% {
    border-color: #37b2b2;
    width: 0px;
    height: 0;
  }
  50% {
    width: 100%;
    height: 0;
  }
  100% {
    border-color: #37b2b2;
    width: 100%;
    height: 100%;
  }
}
@keyframes bottom-left-border {
  0% {
    border-color: #37b2b2;
    width: 0px;
    height: 0;
  }
  50% {
    width: 100%;
    height: 0;
  }
  100% {
    border-color: #37b2b2;
    width: 100%;
    height: 100%;
  }
}
.swipe-fill {
  display: inline-block;
  padding: 16px 28px;
  border: 2px black solid;
  text-align: center;
  text-decoration: none;
  color: black;
  background: white;
  position: relative;
  overflow: hidden;
  transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out;
  z-index: 1;
  border-radius: 0px;
}
.swipe-fill:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #666;
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  z-index: -1;
}
.swipe-fill--up:before {
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}
.swipe-fill--down:before {
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}
.swipe-fill--left:before {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}
.swipe-fill--right:before {
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}
.swipe-fill:hover {
  color: white;
  border: 2px black solid;
}
.swipe-fill:hover:before {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.box-fill {
  display: inline-block;
  padding: 16px 28px;
  border: 2px black solid;
  text-align: center;
  text-decoration: none;
  color: black;
  position: relative;
  overflow: hidden;
  background: white;
  transition: color 0.35s ease-in-out;
  z-index: 1;
  border-radius: 0px;
}
.box-fill:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #666;
  transition: opacity 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out;
  -webkit-transform: scale(0);
          transform: scale(0);
  z-index: -1;
  opacity: 0;
}
.box-fill:hover {
  color: white;
}
.box-fill:hover:before {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.box-fill--out {
  color: white;
}
.box-fill--out:before {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.box-fill--out:hover {
  color: black;
}
.box-fill--out:hover:before {
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
}

.cross-fade {
  display: inline-block;
  padding: 16px 28px;
  border: 2px black solid;
  text-align: center;
  text-decoration: none;
  color: black;
  position: relative;
  overflow: hidden;
  transition: color 0.75s ease-in-out;
  z-index: 1;
  border-radius: 0px;
}
.cross-fade:before, .cross-fade:after {
  content: '';
  position: absolute;
  top: 0;
  left: -25%;
  width: 150%;
  height: 100%;
  background: rgba(102, 102, 102, 0.5);
  transition: -webkit-transform 0.75s ease-in-out;
  transition: transform 0.75s ease-in-out;
  transition: transform 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out;
  z-index: -1;
}
.cross-fade:before {
  -webkit-transform: translate3d(100%, 0, 0) skew(20deg);
          transform: translate3d(100%, 0, 0) skew(20deg);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}
.cross-fade:after {
  -webkit-transform: translate3d(-100%, 0, 0) skew(20deg);
          transform: translate3d(-100%, 0, 0) skew(20deg);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.cross-fade:hover {
  color: white;
}
.cross-fade:hover:before, .cross-fade:hover:after {
  -webkit-transform: translate3d(0, 0, 0) skew(20deg);
          transform: translate3d(0, 0, 0) skew(20deg);
}

a:not([class]) {
  text-shadow: white 1px 0px 0px, white 0.540302px 0.841471px 0px, white -0.416147px 0.909297px 0px, white -0.989992px 0.14112px 0px, white -0.653644px -0.756802px 0px, white 0.283662px -0.958924px 0px, white 0.96017px -0.279415px 0px;
  text-decoration: none;
  background-image: linear-gradient(#37b2b2 50%, #37b2b2 50%);
  background-size: 10000px 1px;
  color: #37b2b2;
  background-repeat: no-repeat;
  background-position: 0 1em;
  background-position: -10000px 1em;
}
a:not([class]):hover {
  background-position: 0 1em;
  transition: background-position 2s ease-in-out;
}

body {
  font-family: sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px;
  font-family: 'Maven Pro', sans-serif;
  text-align: center;
}

h1 {
  font-size: 2.8rem;
}

h2 {
  font-size: 2rem;
}

h1, h2 {
  font-family: 'Yrsa', cursive;
}

p {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

hr {
  margin: 40px auto;
  max-width: 100px;
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  padding: 0;
}

.pen-intro {
  text-align: center;
}

.button-container a {
  margin: 0 10px;
}

  </style>

<body>

  <header class="pen-intro">
  <h1 dir='rtl'>لینک های بسیار پیشرفته با استفاده از CSS</h1>
  <p dir='rtl'>لینک هایی که می بینید به زیبایی هر چه تمام تر و با استفاده از CSS طراحی شده اند. هیچ کد جاوا اسکریپتی در طراحی آن ها به کار برده نشده است و همین موضوع جذابیت آن را دو چندان می کند</p>
  </header>

<hr />

<div class="button-container">
  <h2>Draw Outline</h2>
  <a href="#" class="draw-outline">Single Outline</a>
  <a href="#" class="draw-outline draw-outline--tandem">Tandem Outline</a>
</div>

<hr />

<div class="button-container">
  <h2>Swipe Fill</h2>
  <a href="#" class="swipe-fill swipe-fill--up">Swipe Fill Up</a>
  <a href="#" class="swipe-fill swipe-fill--down">Swipe Fill Down</a>
  <a href="#" class="swipe-fill swipe-fill--left">Swipe Fill Left</a>
  <a href="#" class="swipe-fill swipe-fill--right">Swipe Fill Right</a>
</div>

<hr />
<div class="button-container">
  <h2>Box Fill</h2>
  <a href="#" class="box-fill">Box Fill In</a>
  <a href="#" class="box-fill box-fill--out">Box Fill Out</a>
</div>

<hr />

<div class="button-container">
  <h2>Cross Fade</h2>
  <a href="#" class="cross-fade">Button One</a>
</div>

<hr />
</body>

</html>

مشاهده ی خروجی در JSBin

میبینید که می توان طراحی لینک های ساده را تا چه حد پیشرفته تر کرد!

امیدوارم از این قسمت لذت برده باشید.

دیدگاه‌های شما (3 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

amir

10 بهمن 1399

سلام وقت بخیر من در Font Awesome میخواک ایکون دست رو بیارم نمیاره ایکونی که شبیه به دوتا دست باشه یعنی همکاری با ما به انگلیسی باید چی تایپ کنم که بیاد ؟ هرچی میزنم نمیاره ...