Bootstrap 3 Tutorial

Bootstrap 3 Glyphicons

Last modified on: October 28, 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">&nbsp;</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="59fced8a-ab23-45f3-864b-c69c2766ec6c" data-message-model-slug="gpt-4o-mini">
<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">
<h3>Bootstrap 3: Glyphicons</h3>
<p><strong>Glyphicons</strong> are icon fonts that come bundled with Bootstrap 3. They provide a wide range of scalable icons that can be easily customized and styled using CSS. These icons are useful for enhancing user interfaces by adding visual elements that improve usability and aesthetics.</p>
<hr />
<h3>How to Use Glyphicons</h3>
<p>To use Glyphicons in Bootstrap 3, you need to ensure that you have included the Bootstrap CSS file in your HTML document. Glyphicons are accessed using the <code>&lt;span&gt;</code> tag with specific classes.</p>
<h4>Example of Using Glyphicons</h4>
<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="spinner-border" role="status"&gt;
    &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Commonly Used Glyphicons</h3>
<p>Here&rsquo;s a selection of commonly used Glyphicons along with their class names:</p>
<table>
<thead>
<tr>
<th>Icon Name</th>
<th>Class Name</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star</td>
<td><code>glyphicon glyphicon-star</code></td>
<td>⭐</td>
</tr>
<tr>
<td>Checkmark</td>
<td><code>glyphicon glyphicon-ok</code></td>
<td>✅</td>
</tr>
<tr>
<td>Remove</td>
<td><code>glyphicon glyphicon-remove</code></td>
<td>❌</td>
</tr>
<tr>
<td>Plus</td>
<td><code>glyphicon glyphicon-plus</code></td>
<td>➕</td>
</tr>
<tr>
<td>Trash</td>
<td><code>glyphicon glyphicon-trash</code></td>
<td>🗑️</td>
</tr>
<tr>
<td>Home</td>
<td><code>glyphicon glyphicon-home</code></td>
<td>🏠</td>
</tr>
<tr>
<td>User</td>
<td><code>glyphicon glyphicon-user</code></td>
<td>👤</td>
</tr>
<tr>
<td>Cog</td>
<td><code>glyphicon glyphicon-cog</code></td>
<td>⚙️</td>
</tr>
</tbody>
</table>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>Glyphicons in Bootstrap 3 are a versatile tool for enhancing your web applications. They are easy to implement and provide a wide range of icons that can improve the overall user experience. By using the appropriate classes, you can easily add icons to buttons, navigation menus, and other elements throughout your site.</p>

Web Technology View More