I am using a glyphicon icon and it is used inside a button. But the size of the icon is too big for the button. How can I reduce the size of the glyphicon ?
I already used small tag and it didin't work.
You can use inline style format to adjust font size for specific glyphicon elements
<button>
<span style="font-size:12px" class="glyphicon glyphicon-search"></span> Search
</button>
For all the glyphicon you can try like below:
.glyphicon {
font-size: 12px;
}
For a specific icon:
.glyphicon.glyphicon-plus {
font-size: 12px;
}
Hope it will be helpful.
This would be your normal implementation of the glyphicon:
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
You could just give all glyphicons a new size with:
.glyphicon {
font-size: 12px
}
or you could give the span a ID:
<span class="glyphicon glyphicon-search" aria-hidden="true" id="small_glyphicon"></span>
and change the size for the ID:
#small_glyphicon {
font-size: 12px; /* or lower */
}
Glyphicons are essentially fonts. So, you could specify the desired size through the font-size property.
I tend to keep these four classes glyphicon-lg, -md, -sm and -xs in my projects, as they generally work well with btn-lg, -md, -sm and -xs.
.glyphicon-lg {
font-size: 18px;
}
.glyphicon-md {
font-size: 14px;
}
.glyphicon-sm {
font-size: 12px;
}
.glyphicon-xs {
font-size: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="glyphicon glyphicon-lg glyphicon-asterisk"></div>
<div class="glyphicon glyphicon-md glyphicon-asterisk"></div>
<div class="glyphicon glyphicon-sm glyphicon-asterisk"></div>
<div class="glyphicon glyphicon-xs glyphicon-asterisk"></div>
Same as changing the font-size (or style for that matter).
Use style= "font-size: 12px;"
You can use in-line style format e.g.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true" style=
"font-size: 12px;"></span>
</button>
or in your custom CSS file e.g.
.glyphicon{
font-size: 12px;
}
Related
I have an accordion in Html
<accordion [isAnimated]="true">
<accordion-group heading="Date Created">
{{ example text }}
</accordion-group>
</accordion>
I want to reduce the size of the box, text and the text when clicked. Basically reduce the size of entire box. How to do that?
I have tried these below which reduce the Header text and body text but not the box
<accordion-group panalClass="xyz">
<button
class="btn btn-link btn-block clearfix"
accordion-heading
type="button" panalClass="xyz"
>
<div class="pull-centre float-centre" style="background-color: blue;">
Date Created
</div>
</button>
{{ example text }}
</accordion-group>
I want to align the element with rest of the page.
Since I didnt find an option to resize it I found out that I have to use the angular generated classes (Shadow CSS concept) which can be seen in the elements section in console page. In this case it was ".panel-heading" and ".panel-body".
Use the angular class within your own class to make the effect IN styles.css to get the effect. Like this:
.accordion-small {
.panel-heading {
padding: 0px;
}
}
.accordion-small {
.panel-body {
padding: 5px;
font-size: small;
text-align: center;
}
}
In html:
<accordion [isAnimated]="true" class="accordion-small">
<accordion-group>
<button
class="btn btn-link btn-block clearfix"
accordion-heading
type="button"
>
<div class="pull-centre float-centre header-name">
Date Created
</div>
</button>
{{ example text }}
</accordion-group>
</accordion>
In component css
.header-name {
font-size: small;
}
Result:
Another way is you can use [panelClass]="customClass" to define the custom styling for your ngx-bootstrap accordion.
In css:
.custom-accordion-style {
/*any size you want*/
line-height: 30px;
font-size: small;
}
In ts:
customClass='custom-accordion-style';
In html:
<accordion [isAnimated]="true">
<accordion-group [panelClass]="customClass">
<button class="btn btn-link btn-block clearfix"
accordion-heading
type="button">
<div class="pull-centre float-centre">
Date Created
</div>
</button>
{{ example text }}
</accordion-group>
</accordion>
This question already has answers here:
Can you target an element with CSS only if 2 classes are present?
(2 answers)
Closed 4 years ago.
I have this button:
<button type="button" class="btn btn-link btn-link-dark">
<i class="material-icons">help</i>
</button>
When I hover over it, it becomes blue. I want to alter this.
This does the trick:
.btn-link:hover {
color: white;
}
But I only want this when the class btn-link-dark is included.
These syntax, used seperate, don't work:
.btn-link-dark .btn-link:hover {
color: white;
}
.btn-link-dark:hover .btn-link:hover {
color: white;
}
I don't want a third class.
By putting a space between the classes, you're using the descendant combinator.
.btn-link-dark .btn-link
translates to "A .btn-link which is a descendant of a .btn-link-dark". To indicate that one element needs both class names, don't put a space between them, eg .btn-link-dark.btn-link:hover:
.btn-link-dark.btn-link:hover {
color: white;
}
<button type="button" class="btn btn-link btn-link-dark">
<i class="material-icons">help (hover effect)</i>
</button>
<button type="button" class="btn btn-link">
<i class="material-icons">help (no effect)</i>
</button>
You can override using !important;
This approach can be used if you want to override existing hover styles with your styles.
.btn-link-dark.btn-link:hover {
color: red;
}
.btn-link-dark.btn-link:hover {
color: green !important;
}
<button type="button" class="btn btn-link btn-link-dark">
<i class="material-icons">help</i>
</button>
.btn-link.btn-link-dark:hover {
color: blue;
}
.btn-link:hover {
color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-link btn-link-dark">
<i class="material-icons">help</i>
</button>
https://jsfiddle.net/Sampath_Madhuranga/aq9Laaew/158765/
This works fine.
So i had a solution to do something like this:
the problem was that everytime i had a little bigger text my button increased, and it became really ugly since i have a section full of buttons that i want to preserve the same size.
So i think a good option would be to mantain the same size for the buttons? (if there is other option would like to know :)).
So i had this:
<div class="col-md-1">
<button class="btn btn-primary-outline btn-small">
<span class="glyphicon glyphicon-share"></span>
<br><span class="fontSize">Image</span>
</button>
</div>
how can i change my solution to have the same effect i want on the button, i mean with the image and text centered related to the image mantaining the size of the button? any help i appreciate :)
Thanks
Are you looking for something like this? (I know, it's ugly)
#test{
min-width: 5px;
max-width: 5px;
}
<button id="test">test</button>
Here you go with a solution https://jsfiddle.net/r3g31e11/1/
.btn {
width: 100px;
height: 30px;
text-overflow: ellipsis;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">
Submit
</button>
<br/>
<br/>
<button class="btn btn-primary">
Testisnottoincreasebuttonwidth
</button>
Truncate the extra character use ellipse. Set height & width of the button.
.test {
width : 80px;
}
.test > span {
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:40px;
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-1">
<button class="btn btn-primary-outline btn-small test"><span>Test</span></button>
<button class="btn btn-primary-outline btn-small test"><span>Test with large size</span></button>
</div>
Is there a bootstrap 3 way to handle small screen sizes for "btn-group"?
Button group is placed in <td> and wrapped in <div class="btn-group">:
Looks okay, until you re-size it to <768px. Then you have:
How to make them persistent? I tried to add class btn-group-justified. But it gives as a result full width buttons and looks even worse on re-size to small screen size.
P.S> I have an idea, how to implement it adding full set of custom classes. My question is about bootstrap3 way. May be I missed something.
You can create two button groups with the same buttons and make one of them btn-group-vertical. Then after applying the hidden-xs and visible-xs to them you can hide and show vertical group on appropriate screen size.
<div class="btn-group hidden-xs">
<button class="btn btn-default">View</button>
<button class="btn btn-default">Delete</button>
</div>
<div class="btn-group-vertical visible-xs">
<button class="btn btn-default">View</button>
<button class="btn btn-default">Delete</button>
</div>
Unfortunately, this requries repeating the markup of the buttons but it should not be an issue if you use any templating tool (define the markup once and include it twice).
Wide screen:
Narrow screen:
See the JSFiddle.
I want to offer you a version with icons from FontAwesome.
With a minimum screen resolution text hide leaving only icons.
Sorry for my english.
<div class="btn-group">
<button class="btn btn-default" title="View"><i class="fa fa-eye"></i><span class="hidden-xs"> View</span></button>
<button class="btn btn-default" title="Delete"><i class="fa fa-times"></i><span class="hidden-xs"> Delete</span></button>
</div>
UPDATE by Vishal Kumar: add GLYPHICONS preview
Check this fiddle: http://jsfiddle.net/Jeen/w33GD/4/
Here's an alternative to #fracz's answer you can try that won't duplicate HTML content. Just copied the css from btn-vertical-group and btn-group and used a media query.
All you have to do is add btn-toolbar-responsive to the toolbar div's classes.
It's in scss for simplicity although you can convert it online easily. Here is the JS Bin:
demo
SCSS:
.btn-toolbar.btn-toolbar-responsive{
text-align: center;
margin: 0;
.btn-group{
float: none;
}
#media (max-width: 767px){
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group{
position: relative;
display: block;
vertical-align: middle;
margin: 0;
.btn {
display: block;
float: none;
max-width: 100%;
}
.btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn:last-child:not(:first-child) {
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
}
.btn-group:not(:first-child):not(:last-child) {
.btn {
border-radius: 0;
}
}
.btn-group:first-child:not(:last-child) {
.btn:last-child, .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
.btn-group:last-child:not(:first-child) {
.btn:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
}
}
}
Okay, so this worked in a test page I made:
<div class='btn-group'>
<button class='btn btn-default col-xs-6'>View</button>
<button class='btn btn-default col-xs-6'>Delete</button>
</div>
Forcing each button to be 50% using col-xs-6 kept it from wrapping in my own test page modeled after your example. However, if you have a wider table than the example and you squish down to 320px, the text will overflow the buttons and it looks even worse than your bad example.
You may already know this and it may not be practical for your situation, so I apologize if I'm just presenting unhelpful examples. However, if your table is much wider than what you posted as an example, I would suggest making your rows using the BS grid instead of a table. What this allows you to do is make a single row become two rows when the page shrinks, e.g.
<div class='row'>
<div class='col-xs-12 col-sm-6'>Some additional details</div>
<div class='col-xs-6 col-sm-3'>Date</div>
<div class='col-xs-6 col-sm-3'>
<div class='btn-group'>
<button class='btn btn-default col-xs-6'>View</button>
<button class='btn btn-default col-xs-6'>Delete</button>
</div>
</div>
</div>
then, just find a way to alternate colors, add borders, or whatever you need to show the separation between the multiple row rows.
In the BootPly that I just made, as I said, the buttons start to overlap at very small sizes, but they don't wrap when inside a <td> in my browser tests:
http://www.bootply.com/117330
try to set min-width on <td>
<td style="min-width: 90px">
<div class="btn-group">
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-check"></i>
</button>
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-question"></i>
</button>
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-times"></i>
</button>
</div>
</td>
<div id="secondNav" class="btn-group" role="group">
<button class='btn btn-default'>View</button>
<button class='btn btn-default'>Delete</button>
</div>
You can accomplish this with some simple jQuery
<script>
$(window).resize(function() {
justifyBtnGroup('secondNav');
});
function justifyBtnGroup(id) {
var btnGroup = $('#' + id);
if($(window).width() > 768) {
btnGroup.addClass('btn-group').removeClass('btn-group-vertical');
} else {
btnGroup.removeClass('btn-group').addClass('btn-group-vertical');
}
}
justifyBtnGroup('secondNav'); // will run when page loads
</script>
This help for me. It doesn't make the buttons vertical, but it doesn't compress them either
<div class="btn-group flex-wrap" data-toggle="buttons">
No, If you open page in small screen, bootstrap wrap you buttons.
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
you can add the class (btn-group-xs,btn-group-sm) in the media < 720px
hope it will help you ;)
Hi there i have 5 star rating system and i would like to make it so that i can add say 4.3 stars rather than just 4. How would i do this? My current code is listed below:
<center>
<span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
<span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
<span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
<span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
<span class="glyphicon glyphicon-star"></span>
</center>
You could overlap 2 absolute positioned divs. Each would contain all 5 stars. Then the top div could have an overflow:hidden div in it, where you set the width equal to a percentage (based on the rating).
Here is a codepen that I put together that illustrates it: http://codepen.io/anon/pen/ogBWwX The code snippets are copied below for reference and includes a little extra than what is needed, for the purpose of the demo.
HTML:
<div class="container">
<div class="flt_left">
<form id="star_form">
<label for="star_input">Stars:</label>
<input type="text" id="star_input" />
<button id="setStars">Set Rating</button>
</form>
</div>
<div class="flt_left">
<div id="star_box">
<div class="star_limiter">
<div class="longbar">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</div>
</div>
</div>
<div class="star_bg">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</div>
</div>
<div style="clear:both;"></div>
<p id="rating_data"></p>
</div>
CSS:
.container{
padding: 15px;
margin: 10px;
}
p{
margin: 10px 0;
}
.flt_left{
float: left;
margin-right: 10px;
position: relative;
/*min-width: 250px;*/
}
#star_box,
.star_bg{
color: #BBD41C;
position: absolute;
margin: 4px 0;
top: 0;
left: 0;
display: table;
}
.glyphicon{
display: table-cell;
padding: 0 0 0 2px;
font-size: 18px;
}
#star_box{
z-index: 2;
}
.star_bg{
color: #555;
}
#star_box .star_limiter{
width:100%;
overflow: hidden;
position: relative;
}
Javascript:
function setWidth(perc){
$('#star_box .star_limiter').css('width',perc+'%');
}
function starToPercent(amt,outof){
if(typeof outof == 'undefined') outof = 5;
var percent = Math.round(amt*100/outof);
if(percent > 100) percent = 100;
$('#rating_data').text(amt+' of '+outof+' stars, or '+percent+'%');
setWidth(percent);
}
function setRating(){
var input = parseFloat($('#star_input').val());
var num_stars = $('#star_box .star_limiter .glyphicon-star').length;
if(!isNaN(input)) starToPercent(input, num_stars);
}
$(document).ready(function(){
var star_width = $('#star_box').width();
var star_height = $('#star_box').height();
$('#star_box').css('width',star_width+'px');
$('#star_box .star_limiter').css('height',star_height+'px');
$('#star_box .longbar').css('width',star_width+'px');
$('#setStars').click(setRating);
$('#star_form').submit(function(e){
e.preventDefault();
setRating();
});
});
Notes:
The overlapped stars don't look great, since you see a bit of the color of the background stars around the edges. So, it looks better if you get rid of the background stars and just use a solid color. It also is less noticeable the more you match the color.
I set the CSS of the glyphicons to display:table-cell to prevent them from wrapping and to position them closer together. More space between the stars creates less accurate results on floats.
You can't use multiple colors on an icon font, so what you ask isn't possible. You could use a partial background fill, but that doesn't seem very desirable.
If you switch to Font Awesome you would at least have access to half-star symbols.
I found this works, the major drawback being that you need to style specific classes based on the font size:
HTML:
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star half-star"></i>
CSS:
.half-star {
width:5px; // Roughly half the font size
overflow:hidden;
}
While these answers are both correct (regarding multiple colors) and long and perhaps too exact (overlapping divs, which uses pixels to move things), I found a great hack just now involving the :after selector.
Basically, if you know what the background color is going to be, you can just cover half (or whatever percentage you need) of a character this way:
HTML:
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star half-star"></span>`
CSS:
.half-star {
letter-spacing: -0.5em;
&:after {
position: absolute;
content: "";
left: 0.5em;
width: 0.5em;
height: 1em;
background-color: $body-bg;
}
}
First, I set the letter-spacing to half the font's default, which aligns the following text, stars, or other elements correctly. Then, I create an absolutely positioned block of $body-bg half the width of the star and half-way over the star (this is for a 4.5 star rating). You can change that decimal to match your desired rating.
You cannot change the color of the glyph, and it would take much more hacking to add a different color or glyph over the first (think the same way as I showed but from the other direction) but it could be done without any Javascript and purely with HTML and CSS this way.
Font-awesome has a ready star-system solution:
Look at "Star Ratings (inspired by CSS Tricks)"
in their website