تاپ سایت 98 لوگو
دسته : طراحی سایت

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

نویسنده: هدایت عباسی

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

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

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

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

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

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

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

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

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

<link rel="icon" href="/favicon.ico" type="image/x-icon">

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

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

برای قررا دادن لوگو سایت ، از 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 را به صفحه وب اضافه کنید تا بتوانید از فونت آیکون های آن استفاده کنیم.

روش cdn font-awesome

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

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

امیدواریم این آموزش برای شما مفید باشد.

موفق باشید.

تبلیغات

منبع: تاپ سایت 98 تاریخ: 2019-01-19 15:06:04
تگ:

برای ثبت نظر باید وارد حساب کاربری شوید ورود پس از ورود ، صفحه را رفرش نمایید.

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