Bootstrap Glyphicon: 100% Width
In my webapp, I have a glyphicon contained in a div inside a grid.
I would like the glyphicon to be full and proportional (to display correctly).
How can i do this?
Plunker: http://plnkr.co/edit/9GL54M1ozwwpQgJXlCbc?p=preview
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-xs-offset-4" style="border: solid 2px red">
<span class="glyphicon glyphicon-star"></span>
</div>
</div>
</div>
</body>
CSS:
.glyphicon {
width: 100%;
color: green;
border: 3px solid green;
}
Sincerely.
source to share
To do this .. to make the glyphicon Star icon responsive.
It can be done like this. Use this to do what you want to achieve here. Not so much for filling the width as for what you need. Hope this helps.
.star-size {
font-size: 8.5vw;
color:orangered;
}
But please read this information .
If you also want the height of the div to be passed with a star symbol, then change the class .inner-block
to this ...
.inner-block {
padding-top: 15px;
padding-bottom: 15px;
background-color:black;
}
And then he will act as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>HTML/CSS Block not appearing</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 240px;
padding-top: 15px;
background-color:orangered;
}
.inner-block {
height: 120px;
padding-top: 15px;
background-color:black;
}
.star-size {
font-size: 8.5vw;
color:orangered;
}
.center-div {
position: absolute;
left:0;
right:0;
margin:auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="container block">
<div class="row">
<div class="col-xs-4 text-center inner-block center-div" >
<span class="glyphicon glyphicon-star star-size"></span>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
source to share
Glyphicons are actually special font characters, so they don't really scale. If you really want to do this, you have to create an image and stretch it with, for example width: 100%
.
Another possible (but nasty) solution would be to use CSS transforms, but this is a hack, does not automatically scale, and requires additional hacks to position correctly:
.glyphicon:before {
margin-left: 120px;
display:inline-block;
transform:scale(17,1);
-webkit-transform:scale(17,1);
-moz-transform:scale(17,1)
-ms-transform:scale(17,1);
-o-transform:scale(17,1);
}
Example: http://plnkr.co/edit/Xk19bLqZKj7sDulZ6AiH?p=preview
source to share