Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Twitter Bootstrap

Bootstrap Icon-bar Span Not Visible

Post a Comment
I am working on a project and while doing the header I cannot find a reason why the span icon-bar in a button for dropdown is not showing have a look: Here is the html for the code

Solution 1:

You can add only bootstrap button class for toggle icon bar same as below:

see Updated demo

<buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="Your class"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button>

CSS:

.btn-group-sm>.btn, .btn-sm {
    float: none;
}
.navbar-toggle {
    display: inline-block;
    float: none;
}

Solution 2:

You say: i want icon bar be show always,so can use of after , no need bootstarp icons:

Css :

.btn-sm + span:after {
    content: '\2261';
    margin-left: 10px;
    font-size: 15px;
}

Html:

<divclass="col-lg-4"style="text-align: center;"><buttonclass="btn btn-sm">CONTACT</button><span><span><--------------Added
   <spanclass="icon-bar"></span><---------------Remove
   <spanclass="icon-bar"></span><---------------Remove
   <spanclass="icon-bar"></span><---------------Remove
</div>

body
{
    margin:0;
    padding:0;
}

.navbar-default{
    border-radius: 0;
    background-color: white;
}

.wb
{
font-weight:bold;
}

.big
{
font-size: 25px;
}

.navbar-header.navbar-brand
{
font-size: 17px;
}

.icon-bar
{
    background-color: red;
    color:red;
}

.nav-justified
{
    line-height: 52px;
} 

.btn-sm + span {
    border:1px solid #ccc;
    text-align:center;
    padding:5px10px;
    cursor:pointer;
}

.btn-sm + span:hover {
 background-color:#ccc;
}

.btn-sm + span:after {
    content: '\2261';
    font-size: 15px;
}        
<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><divclass="container"><navclass="navbar navbar-default"><divclass="container"><divclass="row"><divclass="navbar-header col-lg-4"><ahref="#"class="navbar-brand"><spanclass="wb"><spanclass="big">S</span>OFT</span><spanclass="big">H</span>OUSE</a></div><divclass="nav-container col-lg-4"><ulclass="nav nav-justified"><li>What</li><li>Work</li><li>About</li></ul></div><divclass="col-lg-4"style="text-align: center;"><buttonclass="btn btn-sm">CONTACT</button><span></span></div></div></div></nav></div>

Solution 3:

do this with font awesome

html code:- 

<!DOCTYPE html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>SoftHouse</title><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><linkrel="stylesheet"type="text/css"href="css/style.css"></head><body><divclass="container"><navclass="navbar navbar-default"><divclass="container"><divclass="row"><divclass="navbar-header col-lg-4"><ahref="#"class="navbar-brand"><spanclass="wb"><spanclass="big">S</span>OFT</span><spanclass="big">H</span>OUSE</a></div><divclass="nav-container col-lg-4"><ulclass="nav nav-justified"><li>What</li><li>Work</li><li>About</li></ul></div><divclass="col-lg-4"style="text-align: center;"><buttonclass="btn btn-sm">CONTACT</button><aclass="icon-bar"href="#"><iclass="fa fa-caret-down"></i></a></div></div></div></nav></div></body></html>

in css:-

.icon-bar { color: red; }

You may like these posts

Post a Comment for "Bootstrap Icon-bar Span Not Visible"