How to import files from bootstrap sources

Asked

Viewed 443 times

2

The bootstrap icons are not picking up on my project. I searched and saw that it can be solved by importing the bootstrap source files. What is the best way to import these files into the body of a page?

php css bootstrap

  • Young man, put your code there with the <head>. It may be that your problem is with the indexing of the files etc. Because with the answer I gave below should work there too...

1 answer

2

You can import directly from <head> from your site in this way for example

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">

Or if you want you can call <style> or directly into . CSS in this way for example:

<style>
    @font-face {
      font-family: 'Glyphicons Halflings';
      src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
      src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
    }
</style>

And wherever you want to use the icons remember to put font-family

Here’s the Glyphicon project on Github https://github.com/ohpyupi/glyphicons-only-bootstrap

Example of CDN application:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">

<p>Envelope: <span class="glyphicon glyphicon-envelope"></span></p>

Example of application by @font-face in the <style> or .css:

@font-face {
      font-family: 'Glyphicons Halflings';
      src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
      src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font: normal normal 16px/1 'Glyphicons Halflings';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-right: 4px;
}
/* Código do ícone */
.glyphicon-fire:before {
  content: '\e104';
}
<div class="glyphicon glyphicon-fire"> fogo na bomba</div>

  • Thanks! But the icons are not working yet, you know what can be?

  • Edit your answer with the full code that will make it easier to answer you more accurately. But with the above code it should work...

  • I also think I should, I’m using semantic ui too, will this cause error?

  • In this case just researching to know... If you can test in another environment would be good to kill the doubt.

  • In my case, when I performed the Bootstrap 4 donwload it does not come with the fonts folder. And although I didn’t come with this folder, inside the css folder does not have the glyphicon file or derivatives of it.

  • 1

    @Feliperoque that’s right, BS4 does not come with Icons natively, I suggest you use Fontawesome or Material Icons, or do as in this last example of my question and use Glyphicon in BS4

  • 1

    @hugocsl I inked these two tags and it worked : <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

Show 2 more comments

Browser other questions tagged php css bootstrap

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