1

I am trying to load search glyphicon with the following:

<div tabindex="6" class="glyphicon glyphicon-search">...<.div>

But, glyphicon loading as the following:

enter image description here

What is the solution?

background-color:none transparent}@font-face{font-family:'Glyphicons Halflings';src:url(/css/fonts/glyphicons-halflings-regular.eot);src:url(/css/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(/css/fonts/glyphicons-halflings-regular.woff) format('woff'),url(/css/fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(/css/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular)
Smitha
  • 6,110
  • 24
  • 90
  • 161
  • Watch your browser developer tools console, in 99% of issues like this the answer is within errors/warnings there. – seven-phases-max Oct 16 '15 at 10:09
  • no error or warning! – Smitha Oct 16 '15 at 10:42
  • I found that search is not at all loaded. It has - only - .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; and .glyphicon-search:before { content: "\e003"; – Smitha Oct 16 '15 at 13:17
  • Please add bootstap CSS to head of your html file – J. Shabu May 05 '17 at 03:11

3 Answers3

0

Check this code

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
    <div tabindex="6">
        <span class="glyphicon glyphicon-search"></span>
    <div>
</body>
</html>
  • 3.3.5 is not my requirement. It works fine there. 3.2.0 is the issue and I think fonts folder is the issue. Its in my grunt task may be – Smitha Oct 16 '15 at 12:03
0

Here is Bootstrap3.2.0 downloaded from Bootstrap site

Unpack and run below code

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="bootstrap3.2.0/css/bootstrap.min.css">
</head>
<body>
    <div tabindex="6">
        <span class="glyphicon glyphicon-search"></span>
    <div>
</body>
</html>

Worked as like as BS3.5

0

Though a late answer, for someone who has this issue:

Using Bootstrap's CDN in the tag solved this issue for me.

Divya
  • 85
  • 1
  • 7