بوت استرپ 4 کتابخانه مخصوص خود را ندارد ، با این حال کتابخانه های آیکون رایگانی وجود دارند که میتوان آیکون ها را از آنجا برگزینید.
مانند کتابخانه ی Font Awesome و Google Material Design Icons.
در این مطلب نحوه استفاده از آیکون در بوت استرپ 4 را به شما آموزش خواهیم داد.
با عرض سلام و وقت بخیر خدمت کاربران گرامی وب سایت پرنیان طرح
در این مبحث Icon ها در بوت استرپ 4 را به شما آموزش خواهیم داد.
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]
تصویر زیر چند نمونه از کلاس آیکون ها است :
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]
تصویر مثال بالا :
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]
خروجی کدهای مثال بالا :