Add external icons to Bootstrap

Asked

Viewed 6,977 times

3

I downloaded a Bootstrap template and I want to exchange some icons that have in it, however, it already has a table of icons that can be used, I would like to know how to put other external icons, not necessarily those that have already been registered in it. Icons (Glyphs: 364) That’s the amount you have, I wanted to add others.

<div class="feature">
    <i class="icon-cloud"></i>
    <p>CLOUD CONNECTIVITY</p>
</div>
twitter-bootstrap css3 bootstrap-glyphicons

2 answers

3

This type of icons worked well in Bootstrap 2.x, now with Bootstrap 3.x it is used
<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" >
  <p class="text-danger">CLOUD CONNECTIVITY</p>
</div>

0

A new icon font can be added without removing the Bootstrap pattern (Glyphicons).

For this I recommend the Fontatisc or the Icomoon, where it is possible to generate custom fonts with CSS already ready.

If you already have the icon source files (.eot,.ttf,.Sv), manually add to CSS

Import sources

@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"; }

Example of use: <i class='icone-personalizado-cloud'></i>

Browser other questions tagged twitter-bootstrap css3 bootstrap-glyphicons

You are not signed in. Login or sign up in order to post.