استفاده از آیکون و فونت آیکون در طراحی سایت

هدایت عباسی طراحی سایت

آموزش font-awesome و فونت آیکون ، قرار دادن favicon در صفحه html و قرار دادن لوگو سایت ، استفاده از فونت آیکون در طراحی سایت و مطالب مهم دیگر .

در این بخش از آموزش طراحی سایت به بحث فونت آیکون می پردازیم.

این آموزش متعلق به تاپ سایت 98 می باشد.

قرار دادن favIcon در صفحه html

برای قرار دادن favIcon در صفحه html می بایست از تگ link و rel آیکون استفاده کرد.

در بخش زیر نحوه کار آن را مشاهده می کنید.

در rel آیکون (icon) ویژگی href برای قرار دادن نام و آدرس آیکون می باشد.

ویژگی type نیز نوع تصویر و آیکون را مشخص می کند.

قرار دادن لوگو سایت

برای قرار دادن لوگو سایت می بایست مطابق مثال زیر عمل کنید.

برای قررا دادن لوگو سایت ، از rel و آیکون استفاده می کنیم.

در یک صفحه html و سایت می بایست به همین روش لوگو سایت و صفحه را مشخص کرد.

<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="demo_icon.gif" type="image/gif">
</head>
<body>
<h1>TopSite98.com</h1>
<p>icon website</p>
</body>
</html>

استفاده از فونت آیکون در طراحی سایت

جهت استفاده از فونت آیکون در طراحی سایت می بایست از font-awesome استفاده کنیم.

از مزیت فونت آیکون این است که بجای تصویر از فونت آیکون استفاده می کنیم.

استفاده از فونت آیکون و font-awesome باعث می شود سرعت لود سایت بالاتر رود.

از font-awesome می توانیم در بخش های مختلف سایت و صفحات html استفاده کنیم.

مثلا می توانیم بجای استفاده از کلمات از فونت آیکون استفاده کنیم.

در مثال زیر یک منو زیبا را با استفاده از فونت آیکون و font-awesome ایجاد کرده ایم.

برای تست این کد کافی است آن را در یک فایل با پسوند html ذخیره کرده و اجرا کنیم تا نتیجه را ببینیم.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon1 {
width: 60px;
background-color: #444;
}
.icon1 a {
display: block;
text-align: center;
padding: 16px;
color: white;
font-size: 34px;
transition: all 0.4s ease;
}
.icon1 a:hover {
background-color: #333;
}
.act {
background-color: #4CAF50;
}
</style>
<body>
<h1>TopSite98.com</h1>
<div class="icon1">
<a class="act" href="https://topsite98.com/"><i class="fa fa-home"></i></a>
<a href="https://topsite98.com/"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="https://topsite98.com/"><i class="fa fa-trash"></i></a>
</div>
</body>
</html>

نحوه استفاده از font-awesome

در این بخش به نحوه استفاده از font-awesome می رسیم.

به دو روش می توان از font-awesome استفاده کرد.

روش اول استفاده از CDN است. روش دوم دانلود فونت آیکون است.

در قسمت زیر هر دو روش را توضیح می دهیم.

دانلود font-awesome

برای دانلود font-awesome کافی است به سایت font-awesome برویم و آن را دانلود نماییم.

در این سایت بایستی فونت مخصوص WEB را دانلود کنید.

پس از دانلود فایل های وب می بایست لینک فایل CSS یعنی font-awesome.min.css یا font-awesome.css را به صفحه وب اضافه کنید تا بتوانید از فونت آیکون های آن استفاده کنیم.