All geek questions in one place

Bootstrap glyphics not showing

I use bootstrap 3 and I put one Glyphicons side by side with the input text, and Glyphicons not showing (but the btn-info show), I use: class = "input-group" for envolve glyphicon, enter the text and submit button.

here is the code:

<body> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Meu Site</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">News</a></li> <li><a href="#">Login</a></li> <li><a href="#">Create Account</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav> <div class="container"> <div class="row"> <div class="span7 text-center col-md-4 col-md-offset-3" style="float: none; margin-left: auto;margin-right: auto;"> <img src="../../app.images/logo.jpg" /> </div> <form class="span7 text-center col-md-4 col-md-offset-3" style="float: none; margin-left: auto;margin-right: auto;" role="search"> <div class="form-group"> <label class="radio-inline"><input type="radio" name="optradio">Opt1</label> <label class="radio-inline"><input type="radio" name="optradio" checked="">Opt2</label> <label class="radio-inline"><input type="radio" name="optradio">Opt3</label> </div> <div class="input-group"> <a href="#" class="btn btn-info input-group-btn"> <span class="glyphicon glyphicon-th"></span> </a> <input class="form-control " type="text" placeholder="Search" /> <div class="input-group-btn"> <button class="btn btn-default" type="submit">Search</button> </div> </div> </form> <div class="span7 text-center col-md-4 col-md-offset-3" style="float: none; margin-left: auto;margin-right: auto;"> Slogan </div> <div class="span7 text-center col-md-4 col-md-offset-3" style="float: none; margin-left: auto;margin-right: auto;"> <a href="#">Mobile</a> <a href="#">Addons</a> <a href="#">Contact</a> </div> </div> </div> </body>
+6
source share
3 answers

This seems to be caused by .input-group-btn. There is a rule to set the font size of this element to 0. Add a style rule with this:

 div.container a.input-group-btn { font-size: 14px; }

Working sample

+8
source

After reading many topics on this topic, a solution appeared here that finally fixed the Glyphicon error:

Find Fonts Catalog

 directory path: node_modules/bootstrap/fonts

Copy and paste the font directory into your source boot directory from which you already developed.

I use Grunt as my task manager, so in my Gruntfile.js I made sure to grunt the following:

 copy: { main: { expand: true, cwd: "node_modules/", src: [ "bootstrap/dist/css/bootstrap.min.css", "bootstrap/dist/css/bootstrap.min.css.map", "bootstrap/*.*", "bootstrap/**/*.*" ], "dest": "server/public/vendor/" } },

My tears finally left then :)

+1
source

Download Example

I will post this as an alternative to your search bar:

 <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-info" type="button"><span class="glyphicon glyphicon-th"></span></button> </span> <input type="text" class="form-control" placeholder="Search for..."> <div class="input-group-btn"> <button class="btn btn-default" type="submit">Search</button> </div> </div><!-- /input-group -->

Basically, replace this code:

 <div class="input-group"> <a href="#" class="btn btn-info input-group-btn"> <span class="glyphicon glyphicon-th"></span> </a> <input class="form-control " type="text" placeholder="Search" /> <div class="input-group-btn"> <button class="btn btn-default" type="submit">Search</button> </div> </div>

With the above and add a Javascript handler to the button if you want to navigate somewhere (note that this is not a <a> tag).

Hope this helps!

Note

The problem (I think) is due to using input-group-btn in the <a> tag that was created as a button. In the Bootstrap examples, input-group-btn is a range with a <button> inside it. You can also try placing <span class="input-group-btn"> around your <a> tag and see if that has changed.

0
source

Source: https://habr.com/ru/post/980128/

More articles:


All Articles