آیکون ها (Icons) در بوت استرپ

بهاره حسنیبهاره حسنی
434 بازدید
آیکون ها
[cdb_box_content css=”.vc_custom_1573376808419{background-color: #1e73be !important;}”]

بوت استرپ ۴ کتابخانه مخصوص خود را ندارد ، با این حال کتابخانه های آیکون رایگانی وجود دارند که میتوان آیکون ها را از آنجا برگزینید.

مانند کتابخانه ی Font Awesome و Google Material Design Icons.

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

[/cdb_box_content]

با عرض سلام و وقت بخیر خدمت کاربران گرامی وب سایت پرنیان طرح

در این مبحث Icon ها در بوت استرپ ۴ را به شما آموزش خواهیم داد.

Bootstrap 4 Icons :

برای استفاده از آیکون های Font Awesome لینک زیر را به صفحه ی HTML خود اضافه نمایید (نیازی به دانلود کردن یا نصب چیزی ندارید).

مثال :

[php]

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

[/php]

کدهای قسمت head

[php]

<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.6.3/css/all.css” integrity=”sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/” crossorigin=”anonymous”></head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>

[/php]

سپس نام کلاس آیکون ها را به عنصر HTML درون خطی اضافه کنید مانند (<i> یا <span>)

[php]

<body>

<div class=”container”>
<h1>My Icons <i class=”fas fa-heart”></i></h1>
<p>An icon along with some text: <i class=”fas fa-thumbs-up”></i></p>
</div>

<div class=”container”>
<p>Others:</p>
<i class=”fas fa-cloud”></i>
<i class=”fas fa-coffee”></i>
<i class=”fas fa-car”></i>
<i class=”fas fa-file”></i>
<i class=”fas fa-bars”></i>
</div>

</body>

[/php]

تصویر زیر چند نمونه از کلاس آیکون ها است :

آیکون ها

my icons

Font Awesome 5 Icons :

برای استفاده از آیکون های رایگان Font Awesome 5 به سایت  fontawesome.com بروید و برای دریافت یک کد برای استفاده در صفحات وب خود وارد سیستم شوید.

اطلاعات بیشتر در مورد چگونگی شروع کار با Font Awesome را در بخش  Font Awesome 5 مطالعه نمایید.

هیچ دانلود یا نصبی نیاز ندارید.

در مثال زیر نحوه سایز دادن ، رنگ دادن و سایه دادن به آیکون ها را مشاهده نمایید.

مثال :

کدهای قسمت head

[php]

<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<script src=”https://kit.fontawesome.com/a076d05399.js”></script>
<!–Get your own code at fontawesome.com–>
</head>

[/php]

کدهای قسمت body

[php]

<body>

<p>Some Font Awesome icons:</p>
<i class=”fas fa-band-aid”></i>
<i class=”fas fa-cat”></i>
<i class=”fas fa-dragon”></i>
<i class=”far fa-clock”></i>
<i class=”fas fa-clock”></i>

<p>Styled Font Awesome icons (size, color, and shadow):</p>
<i class=”fas fa-clock” style=”font-size:24px;”></i>
<i class=”fas fa-clock” style=”font-size:36px;”></i>
<i class=”fas fa-clock” style=”font-size:48px;color:red;”></i>
<i class=”fas fa-clock” style=”font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;”></i>

</body>

[/php]

تصویر مثال بالا :

سایز آیکون ها

icon size

Font Awesome 4 Icons :

برای استفاده از آیکون های Font Awesome 4 کد زیر را در قسمت <head> صفحه html خود اضافه کنید.

کدهای قسمت head

[php]

<head>
<title>Font Awesome Icons</title>
<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”>
</head>

[/php]

کدهای قسمت body

[php]

<body>

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

<p>Styled Font Awesome icons (size, color, and shadow):</p>
<i class=”fa fa-cloud” style=”font-size:24px;”></i>
<i class=”fa fa-cloud” style=”font-size:36px;”></i>
<i class=”fa fa-cloud” style=”font-size:48px;color:red;”></i>
<i class=”fa fa-cloud” style=”font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;”></i>

</body>

[/php]

خروجی کدهای مثال بالا :

آیکون ها

font awesome 4

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

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

22+ محصولات
401+ سفارشات تکمیل شده
2086+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت