10

I have included below

<!-- Bootstrap 4.0 Beta -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha256-m/h/cUDAhf6/iBRixTbuc8+Rg2cIETQtPcH9D3p2Kg0=" crossorigin="anonymous" />
<!-- open-iconic-bootstrap (icon set for bootstrap) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" crossorigin="anonymous" />

And used this as below with no luck

<span class="oi oi-icon-person" title="person" aria-hidden="true"></span>
Orient Developers
  • 139
  • 1
  • 1
  • 10

2 Answers2

20

Use oi-person class instead of oi-icon-person:

<!-- Bootstrap 4.0 Beta -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha256-m/h/cUDAhf6/iBRixTbuc8+Rg2cIETQtPcH9D3p2Kg0=" crossorigin="anonymous" />
<!-- open-iconic-bootstrap (icon set for bootstrap) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" crossorigin="anonymous" />

<span class="oi oi-person" title="person" aria-hidden="true"></span>
fen1x
  • 5,616
  • 6
  • 28
  • 39
1

For installing Iconic manually, you need to create a CSS folder and move open-iconic-bootstrap.css file inside it.

If we open the file, we can see what we need exactly (src: url('../fonts/open-iconic.eot');). Just move fonts folder in ../ and it's working !

vezunchik
  • 3,669
  • 3
  • 16
  • 25
Anthocnt
  • 13
  • 2