Bootstrap 4 Tutorial

BS4 Icons

Last modified on: October 26, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">Bootstrap 4 doesn&rsquo;t come with its own icon library, but it supports several external icon libraries that can be easily integrated into your project. The most popular options include Font Awesome, Material Icons, and Bootstrap Icons (which was introduced later and is compatible with Bootstrap 4).</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="90693909-d540-493b-bcc4-19b58b4d7cd8" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light"><hr />
<h1>Bootstrap 4 Icons</h1>
<h2>1. <strong>Using Font Awesome Icons</strong></h2>
<p>Font Awesome provides a wide variety of icons in different categories. To use it, include the Font Awesome CDN in your HTML.</p>
<h3>Setup</h3>
<p>Add this line in the <code>&lt;head&gt;</code> section to load Font Awesome:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Example: Font Awesome Icons</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div&gt;
    &lt;i class="fas fa-home"&gt;&lt;/i&gt; Home
    &lt;i class="fas fa-user"&gt;&lt;/i&gt; Profile
    &lt;i class="fas fa-envelope"&gt;&lt;/i&gt; Messages
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example:</p>
<ul>
<li><code>fas</code> specifies the solid style of icons.</li>
<li><code>fa-home</code>, <code>fa-user</code>, <code>fa-envelope</code> are specific icon classes.</li>
</ul>
<h2>2. <strong>Using Material Icons</strong></h2>
<p>Google&rsquo;s Material Icons offer a clean, modern icon style. They can be added via a CDN.</p>
<h3>Setup</h3>
<p>Include the Material Icons CDN:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Example: Material Icons</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div&gt;
    &lt;i class="material-icons"&gt;home&lt;/i&gt; Home
    &lt;i class="material-icons"&gt;person&lt;/i&gt; Profile
    &lt;i class="material-icons"&gt;email&lt;/i&gt; Messages
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Here, the text inside the <code>&lt;i&gt;</code> tag (like <code>home</code>, <code>person</code>, <code>email</code>) specifies the icon.</p>
<h2>3. <strong>Using Bootstrap Icons</strong></h2>
<p>Bootstrap Icons is a free library created specifically for Bootstrap. It&rsquo;s compatible with Bootstrap 4 and includes icons in SVG format.</p>
<h3>Setup</h3>
<p>Add the Bootstrap Icons CDN in your HTML:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.min.css"&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Example: Bootstrap Icons</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div&gt;
    &lt;i class="bi bi-house"&gt;&lt;/i&gt; Home
    &lt;i class="bi bi-person"&gt;&lt;/i&gt; Profile
    &lt;i class="bi bi-envelope"&gt;&lt;/i&gt; Messages
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example:</p>
<ul>
<li><code>bi</code> is the Bootstrap Icon prefix.</li>
<li><code>bi-house</code>, <code>bi-person</code>, <code>bi-envelope</code> specify the individual icons.</li>
</ul>
<hr />
<h2>4. <strong>Using Icons in Buttons and Alerts</strong></h2>
<p>Icons can be used alongside text in buttons and alerts to enhance usability.</p>
<h3>Example: Icons with Buttons</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;button class="btn btn-primary"&gt;
    &lt;i class="fas fa-check"&gt;&lt;/i&gt; Submit
&lt;/button&gt;
&lt;button class="btn btn-danger"&gt;
    &lt;i class="fas fa-times"&gt;&lt;/i&gt; Cancel
&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Example: Icons with Alerts</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="alert alert-success"&gt;
    &lt;i class="fas fa-check-circle"&gt;&lt;/i&gt; Success! Your action was completed.
&lt;/div&gt;
&lt;div class="alert alert-warning"&gt;
    &lt;i class="fas fa-exclamation-circle"&gt;&lt;/i&gt; Warning! Check your inputs.
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More