I downloaded a Bootstrap template and I'm trying to change some of the icons that it has in it, but it already has a table of icons that can be used, I'd like to know how to put other external icons, which are not necessarily already were registered in it. Icons (Glyphs: 364) This is the amount you have, I wanted to add others.
<div class="feature">
<i class="icon-cloud"></i>
<p>CLOUD CONNECTIVITY</p>
</div>
This type of icons worked well in Bootstrap 2.x, now Bootstrap 3.x is used with <i class="glyphicon glyphicon-cloud"></i>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div class="feature">
<i class="glyphicon glyphicon-cloud"></i>
<p class="text-danger">CLOUD CONNECTIVITY</p>
</div> However if you want to use another image just use the tag img
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div class="feature">
<img src="http://i.stack.imgur.com/psQDd.png"><pclass="text-danger">CLOUD CONNECTIVITY</p>
</div>A new icon font can be added without removing the default Bootstrap (Glyphicons).
For this I recommend Fontatisc or IcoMoon , where it is possible to generate custom fonts with CSS ready.
If you already have the icon font files (.eot, .ttf, .sv), manually add it to CSS
Import fonts
@font-face {
font-family: 'FontePersonalizada';
src: url('../fonts/FontePersonalizada.eot');
src: url('../fonts/FontePersonalizada?#iefix') format('embedded-opentype'),
url('../fonts/FontePersonalizada.svg') format('svg'),
url('../fonts/FontePersonalizada.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
New base class for icon elements
[class^="icone-personalizado-"]:before,
[class*=" icone-personalizado-"]:before {
font-family: "FontePersonalizada" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Icons
.icone-personalizado-cloud { content: "a"; }
Usage example: <i class='icone-personalizado-cloud'></i>