Is there an easy way of increasing the size of Glyphicons?
I found some solution like Font Awesome but don't want to include new CSS library just to increase size 2 icons.
Setting the font-size of the <span> tag worked for me
<span class="glyphicon glyphicon-ok" style="font-size: 20px;"></span>
As of Bootstrap 3, glyphicons have been changed into fonts rather than sprites. This gives you more flexibility. For example, you can just set the font-size and move on.
<span class="glyphicon glyphicon-adjust" style="font-size:48px;"></span>
Or you can simply write a modifier class:
.glyphicon-2x {
font-size: 48px;
}
Just need to set the fontsize up :)
You have more than one option to do this:
First (set it straight to the element)
<span class="glyphicon glyphicon-search" style="font-size:30px"></span>
Second (set it in a css file)
.glyphicon{
font-size: 30px;
}
Third (build modify-classes) [i prefer this posibility]
.glyphicon-2x{
font-size: 40px;
}
.glyphicon-3x{
font-size: 60px;
}
...
Usage:
<span class="glyphicon glyphicon-2x glyphicon-search"></span>
there are more options to get the third one more tiny. there for you should read more about
Less
according to your question and the comment that brandon gave me, you can use the above with a other icon contianer.
Bootstrap 2.3
First
<i class="icon-search" style="-webkit-transform:scale(1.8);"></i>
Second
.icon-search{
-webkit-transform:scale(1.8);
-moz-transform:scale(1.8);
-o-transform:scale(1.8);
}
Third
.icon-x2{
-webkit-transform:scale(2.0);
-moz-transform:scale(2.0);
-o-transform:scale(2.0);
}
.icon-x3{
-webkit-transform:scale(3.0);
-moz-transform:scale(3.0);
-o-transform:scale(3.0);
}
//here i use the css from above (Bootstrap 3)
//actually you can name it like you want
<i class="icon-search icon-2x"></i>
This is one way to increase the size of icons in Bootstrap 2.3. As I note in my comment, the results will be pretty poor because you are scaling the spritesheet image.
JSFiddle demo
.test {
background-image: url("http://twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png");
width: 90px;
height: 90px;
background-size: 2100px 800px;
}
Consider Fontello instead. They allow you to generate a custom font based on the icons you choose.
You can use:
.icon-whatever {
zoom: 2;
-moz-transform: scale(2); /* Firefox */
}
But, it will look fuzzier the larger you go, as it is scaling the image up. A font-icon library will scale a lot better.
You can override bootstrap's class, for example:
// Size and position are not working.
.icon-glass {
background-size: 800px;
backgroung-position: 10px 50px;
width: 24px;
height: 24px;
}
The problem is that icons will look ugly due to the resolution.
Hope this helps!
If you use the glyphicons for buttons it's pretty simple:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>
The btn-lg defines the size. You can use btn-lg, bnt-sm, btn-sx
Edit:
If you don't use buttons or lg is not large enough, you can add an own class and use font-size (only tested in bootstrap 3.0). In bootstrap 3.0 glyphicons exist as .svg so they won't look ugly
Example:
<button type="button" class="btn btn-default btn-lg myGlyphicon">
<span class="glyphicon glyphicon-star"></span>
</button>
CSS:
.myGlyphicon {font-size: 120%;}
or
.myGlyphicon {font-size: 70px;}
You can use IcoMoon.io
a very easy to use tool for generating icon font of different colours ,size's and even you can generate sprites from you selection.
I just found a very easy way—using "transform". For example, place:
.glyphicon-chevron-right {transform:scale(2.9,2.9);}
in your CSS to increase it 2.9 times.
If you're using Bootstrap 3, why don't you use em widths on the icon? If the icons are embedded within headings/paragraphs/bodies etc. then using a font size in ems will increase the size of the icons relative to the paragraph that they're in.
For example, if you have:
<span class="glyphicon glyphicon-adjust"></span>
In the css that customizes your bootstrap, simply add:
.glyphicon {font-size: 1.25 em;}
This will scale the glyphs.
Try including class lead
<span class="glyphicon glyphicon-home lead"></span>
Or rap it inside a <h4> tag
Related
I am using this file to implement icons on my input button
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type=button class="submitter" onClick="location.href='../test.htm'" value=" Pre-payment"/>
my Css file includes the following code
input[type="button"] {
font-family: FontAwesome;
}
The problem is I want input button value to be of the font that is consistent with my site. Right not the words "Pre-payment" on my button are taking up fonts from font awesome . If I remove font awesome and add my own font family the icon does not appear.
Any suggestions/ Ideas?
I tried to download the font awesome css file and modify it manually from whatever site it is on, but I can't find a copy of it.
Take another aproach, instead of assigning the font-awesome directly to the input assign it as
input[type="button"]:before{ content: 'fontawesomeCode', font-family: FontAwesome }
While keeping pre-payment text on the button and aligning it with padding.
I'm not sure if you can do it using an input element. It is possible using a button though. Here are two examples:
1) Using a seperate element (eg; i or span, etc) within the button for the icon.
<button type="button">
<i class="fa fa-credit-card" aria-hidden="true"></i> Pre-payment
</button>
2) Using a pseudo element which allows you to make the necessary changes for the icon via css.
<button type="button" class="submitter" onClick="location.href='../test.htm'"/>Pre-payment</button>
<style>
button.submitter:before {
font-family: FontAwesome;
content:'\f09d';
margin-right:4px;
}
</style>
You're applying the font family at wrong point. When you're changing the font family it loads that part of the family and all the relative character mappings. So in case you want to add icons, just use the icons as given in the official fontawesome docs. Also Since <input type="button"> is unable to have any html inside it, it's not possible to include text AND icons to it.
I would suggest using <button>.
Reference to my opinion <button> vs. <input type="button" />. Which to use?
HTML
<button type=button class="submitter" onClick="location.href='../test.htm'"> Pre-payment <i class="required-icon-fontawesome"></i></button>
CSS
button {
font-family: tahoma, helvetica, sans-serif;;
}
You can use <button> tag, add a <strong> or <span> inside where you'll use default font.
<button type="button" name="button" class="submitter" onClick="location.href='../test.htm'">
<strong>Pre-payment</strong>
</button>
CSS
button {
font-family: FontAwesome;
}
button strong {
font-family: 'Your font';
}
I'm trying to get rid of the spacing between my input and the buttons to the right of it. Usually, the last resort is to override all the styles by adding an inline style in the tag, overriding everything else. However, I noticed that (a) it doesn't seem to affect the page and (b) the spacing actually gets bigger for smaller screen width.
My conclusion based on that (and some googlearch) is that Bootstrap uses JavaScript to dynamically set the styles to adapt to screens of different sizes. That's great but it gives me only limited control over how the controls are placed.
I'm guessing it's an awesome feature generally speaking but at the moment I'm only interested in Bootstrap's looks, not the layouting. How do I effectively override that? In the future I'll need to apply the layouting so I can't just remove it.
<div class="input-group date form_datetime col-md-5 "
style="border: solid red 1px;"
data-date-format="dd M 'yy - hh:ii"
data-link-field="myDate">
<input class="form-control"
style="border: solid yellow 1px;"
size="16" type="text" value="" readonly>
<span class="input-group-addon" style="border: solid blue 1px;">
<span class="glyphicon glyphicon-remove "
style="border: blueviolet 10px;">
</span>
</span>
<span class="input-group-addon" style="border: solid orange 1px;">
<span class="glyphicon glyphicon-th"
style="border: solid orangered 1px;"></span>
</span>
</div>
<input type="hidden" id="myDate" value="" />
The actual question is how to in the above markup deactivate/override the spacing between input and spans without removing Bootstrap.
Could it be as easy as alternating one of the classes? I've read on some guides but wasn't enlighten, exactly. Likely not because of the docs being wrong, hehe.
Part of the issuing you are experiencing is the use of media queries in Bootstrap that control the style of various elements. That is why they get wider on smaller screens. Media queries are a CSS feature.
The likely reason that your inline styles are not working is because Bootstrap uses !important statements.
NOTE: Please don't interpret Bootstrap's use of !important as a sign to use !important carte blanche yourself. It is considered against best practice to use !important when ever you feel like it. Specificity should be used before !important. Once one has gained enough experience, as the Bootstrap team likely has, then you'll know when it is acceptable to use !important or not.
As for the spacing between input elements and spans I'm not exactly clear on what that is. I take it as you want to remove some of the padding on the spans around the glyphicon spans.
Something like:
.input-group-addon {
padding: 6px 0;
}
Demo JSFiddle.
My problem is when i try to select in my selectbox my button move below to the select dropdown list.
I want to make the button stay even if the dropdown list in selectbox appear.
current output:
http://jsfiddle.net/GZSH6/2/
html:
<div class="form-group input-group fixedBtn">
<button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-list-alt"></span> Create Account</button>
</div>
</div>
css:
.fixedBtn {
position: fixed;
display: block;
}
I wouldn't bother with fixed or absolute positioning as it can be fickle and is not very extendable. Instead, put a height on the wrapping element and set the overflow to visible.
.col-sm-offset-1.col-sm-12 { height: 32px; overflow: visible; margin-bottom: 1.0em; }
Here is the jsFiddle: http://jsfiddle.net/mifi79/JvFV9/2/
The problem with the absolute positioning answers is that if you were to add another form field above it, it would break the display (here is the Fiddle to demo how the other solutions break)
Try this:
.col-sm-12:not(.col-sm-offset-1) { position:absolute; top:50px; }
(you can tweak with the top value to get it exactly how you want it).
jsFiddle demo.
It's not enough to set its position to fixed (or absolute for that matter). You need to set its coords explicitly.
<button style="position:fixed;top:45px;" type="button" class="btn btn-warning input-md">
<span class="glyphicon glyphicon-list-alt"></span> Create Account
</button>
In this case, I'll set its top coordinate to 45px.
I'd like to know if the issue I see is just for my site or if this is a known issue.
I have some social widgets that align pretty well, but for some reason the PlusOne is not aligned correctly.
I used Firebug to compare it with the Facebook Like widget, and according to the CSS, they are both exactly the same height and neither have margins or padding. Their css looks identical.
<div>
<fb:like layout="button_count" show_faces="false" width="90" action="like" font="verdana" colorscheme="light"></fb:like>
<g:plusone size="medium"></g:plusone>
<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=d9550e2f-f25a-4e2e-ae45-7a51cf7e3d46&type=website&buttonText=Share%20item!&embeds=true&style=rotate"></script>
<font face='Verdana, Arial, Helvetica, sans-serif' size='1'> Email item</font>
</div>
Actually I have a link where the same thing i happening: http://news.makemeheal.com/celebrity-plastic-surgery/jennifer-aniston-weighs-on-prince-williams-hair-loss/ (if necessary, reduce your window size so Fbook and G+ are on the same line)
Use this:
<span style="position:relative; top:3px">
<div class="g-plusone" data-size="small" data-annotation="none"></div>
</span>
Had same issue. I put the Google+ code in a <div> and used CSS to limit the max-height property of <div> to 70px and it worked.
Put a div (class=froogle) around the +1 button, float them all and then style as you want. It worked for me:
.facebook-like, .twitter-share-button, .froogle {
float: left;
margin-right: 10px;
}
You could try using relative positioning, e.g. add the following CSS to the G+ button:
position: relative;
top: 5px; /* Or whatever looks right */
Although, while it may fix your problem it doesn't exactly show the cause of the issue.
I'm trying to get the following effect in the jQuery Mobile framework:
|-------------------------------------------------|
|[button1] HeaderText/Image [b1] [b2] [b3] |
|-------------------------------------------------|
Where [b1], [b2] and [b3] are small image buttons in the Header.
Is this even possible currently?
just simple like this
<div class="ui-btn-right">
</div>
I have had troubles with this in the past. Trick is, force all of your links to be data-role="button" and wrap said links in a container with class="ui-btn-[left/right]" (respectively) This takes care of the traditional header button positioning and markup.
<div data-role="header">
<div class="ui-btn-left">
Button1
</div>
<h1>HeaderText/Image</h1>
<div class="ui-btn-right">
B1
B2
B3
</div>
</div>
Seems as if it is possible, check out this link:
Grouped buttons on the jQuerymobile Framework website.
This is how i did it. Some of the styling may not be necessary as the class used on the parent div should be enough.
<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
Team Call
Logout
</div>
In order to use your own image buttons on the right side you'll need to either float or position a div to the right, then add your buttons.
Then you'll need to override the jQuery mobile styles for those specific buttons to prevent them from getting the rounded, gradient button style that's automatically added by the library.
#header {
float: right;
}
#header .ui-btn-up-b,
#header .ui-btn-hover-b,
#header .ui-btn-down-b
#header .ui-btn-active {
border: 0px;
background: none;
}