AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

Bootstrap Icon


Bootstrap Tutorial » Bootstrap Icon

Bootstrap includes 180 icons created using a special font called Glyphicon Halflings. Although this font is not normally free, its creator allows you to use these icons for free within Bootstrap 3.

You can simply use the freely available font-awesome CDN link to include the font-awesome icons in your project.

How to use icons

For performance reasons, all icons require a common CSS class for all of them and a specific CSS class for each one.

To add an icon to any element on the page, use the following code as an example. And don't forget to add a space between the icon and the text to make it look better:

Syntax:

Example:
<span class = "glyphicon glyphicon-search"> </span>

 

How to Use Font Awesome Icons in Your Code - example

As the icons are vector, they look good on any element and at any size. Use them on buttons, navigation bars, or even form fields.

Example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-left"></span>
</button>

<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-center"></span>
</button>

<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-right"></span>
</button>

<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
</div>
</div>

<div class="btn-toolbar" role="toolbar">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>

<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star"></span> Star
</button>

<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star"></span> Star
</button>

<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star"></span> Star
</button>
</div>

</body>
</html>

 

bootstrap icon button, size, list, fa. color, cnd, inside input, link, font, not showingbootstrap icon button, size, list, fa. color, cnd, inside input, link, font, not showing

bootstrap icon button, size, list, fa. color, cnd, inside input, link, font, not showing
Bootstrap Icon - bootstrap

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...
Margen CSS...
Relleno CSS...
Modelo de caja CSS...
Tablas CSS...
Listas CSS...
Enlaces CSS...
Texto CSS...