I am using the Google Material Design Lite CSS library (https://getmdl.io/components/#buttons-section) and I can't seem to change the button size even with inline style.
This is the button I am trying to use:
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
I tried added inline code like this but it's not working:
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" style="width: 40px; height: 40px"">
<i class="material-icons">add</i>
</button>
Anyone has any idea how to change the button size in MDL?
The .mdl-button and .mdl-button--fab classes both have min-width styles, which is why your width of 40px isn't working. You just have to override the min-width style. This code will work:
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" style="width: 40px; height: 40px; min-width: initial;">
<i class="material-icons">add</i>
</button>
Of course it's better to separate your styles, like so:
#myButton {
width: 40px;
height: 40px;
min-width: initial;
}
<!-- Load the MDL stylesheet -->
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<button id="myButton" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
This works for me.
button.my-button {
width: 47px;
height: 30px;
min-width: initial;
padding: 0px 0px; //give me more space
font-size: 13px;
line-height: 0px; //make text middle vertically
}
Related
Either side of a category title I want to display an icon. Here is my code:
<i class="fa fa-tree" style="color: #fcae03;"></i> Christmas Hampers <i class="fa fa-tree" style="color: #fcae03;"></i>
The code works, but how can I make only 'Christmas Hampers' appear on mouseover?
My knowledge of code is limited, would someone mind being quite specific if they can assist me please? Thanks! :)
If I understood you right you want to display only 2 tree icons and on mouseover (hover) to show 'Christmas Hampers'. Then try this code.
If you have some questions leave a comment :)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <!-- Probably you don't need to apply this line -->
<div class="christmas-hampers-wrapper">
<i class="fa fa-tree inline-block" style="color: #fcae03;"></i>
<div class="christmas-hampers-wrapper inline-block">
<div class="christmas-hampers">Christmas Hampers</div>
</div>
<i class="fa fa-tree inline-block" style="color: #fcae03;"></i>
</div>
<style>
.inline-block{
position: inherit;
display: inline-block;
}
.christmas-hampers-wrapper > .christmas-hampers-wrapper{
overflow: hidden;
display: inline-block;
width: 0px; height: 18px;
transition: .3s;
}
.christmas-hampers-wrapper > .christmas-hampers-wrapper > .christmas-hampers{
width: 127px;
}
.christmas-hampers-wrapper:hover > .christmas-hampers-wrapper{
display: inline-block;
width: 127px; height: 18px;
}
</style>
I've been struggling for a correct alignemt between two icons and a small text but I cant manage to properly align them:
I need the text to be align with both icons, can someone give me a help; i've checked a very similar post but I couldn't make it work.
.icon-company-title {
margin-top: 30px;
}
.material-icons.md-18 {
color: $primary;
font-size: 40px;
line-height: 0!important;
}
.material-icons.edit {
color: $primary;
vertical-align: middle;
}
.business-icon {
display: inline-block;
vertical-align: bottom;
}
<div class="icon-company-title">
<div class="business-icon">
<i class="material-icons md-18">business</i>
</div>
<span class="company-card-title">{{ entity.name }}</span>
<button class="" mat-icon-button [matMenuTriggerFor]="menu">
<i class="material-icons edit">mode_edit</i>
</button>
</div>
I have looked at the other questions about this and none of the solutions work. I have a vertical navBar that is supposed to hold buttons, which are also links, and they work fine when they are the default width but when I change the size all the buttons overlap and the only one that shows up is the last one.
Relevant CSS code:
.navBar{
background-color: #180639;
width: 20%;
color: #B6AFC1;
text-align: center;
border: 1px solid #B6AFC1;
font-family: Century Gothic, sans-serif;
font-size: 40px;
left: 0px;
position: absolute;
overflow: visible;
}
button.navBar{
font-size: 40px;
background-color: #675AFD;
margin: 10px;
padding: 10px;
display: inline-block;
float: left;
}
Relevant HTML:
<div class="navBar">
<button type="button" class="navBar">Home</button>
<button type="button" class="navBar">Community</button>
<button type="button" class="navBar">Events</button>
<button type="button" class="navBar" class="navBar">Pride Prom</button>
<button type="button" class="navBar">Resources</button>
<button type="button" class="navBar">Fundraising</button>
<button type="button" class="navBar">current_user.username</button>
<a rel="nofollow" data-method="delete" href="/users/sign_out"><button type="button" class="navBar" class="navBar">Log Out</button></a>
</div>
I am writing this using Ruby on Rails if that helps anyone come up with a solution. Sorry if the code is messy, I have been looking at a lot of solutions and adding a bunch of random stuff in just trying to force it to work. I should also note the end goal is for all the buttons to line up in a column
This is what it looks like presently
I think what's causing the problem here is that you are applying the position:absolute property to both the navbar <div> and the <button>s. You should separate the classes to apply separate styling to each, independently:
HTML: (note that I changed the classnames for the <button>s to navBar_button
<div class="navBar">
<button type="button" class="navBar_button">Home</button>
<button type="button" class="navBar_button">Community</button>
<button type="button" class="navBar_button">Events</button>
<button type="button" class="navBar_button">Pride Prom</button>
<button type="button" class="navBar_button">Resources</button>
<button type="button" class="navBar_button">Fundraising</button>
<button type="button" class="navBar_button">current_user.username</button>
<a rel="nofollow" data-method="delete" href="/users/sign_out"><button type="button" class="navBar_button" class="navBar">Log Out</button></a>
</div>
And CSS:
.navBar {
background-color: #180639;
width: 20%;
color: #B6AFC1;
text-align: center;
border: 1px solid #B6AFC1;
font-family: Century Gothic, sans-serif;
font-size: 40px;
left: 0px;
position: absolute;
overflow: visible;
}
.navBar_button {
font-size: 40px;
background-color: #675AFD;
margin: 10px;
padding: 10px;
display: inline-block;
}
Also keep in mind that you don't need the float:left if you have the display:inline-block for the buttons, you can use one or the other. And your navBar div is only 20% width, so these elements will essentially stack on top of each other. If you expand that width to 100%, they will then be next to each other along the top.
I am making a form and I want to use Font-Awesome icon on my input field.
Here is my HTML code.
<div class="form-group">
<span class="input-icon">
<i class="fa fa-user"></i>
<input class="form-control" name="username" placeholder="Username" type="text">
</span>
</div>
I want to show the icon on my input field. Currently it show up above my input field.
There are so many ways to achieve this. Follow the method below and adjust as needed.
span {
position: relative; /* Helps curtail overlap */
border: solid 1px #bbb;
padding: 3px 5px 5px 25px; /* Adjust as needed */
}
span input {
border: none;
}
span:before {
content: '\f007';
position: absolute;
left: 5px;
font-family: fontAwesome;
color: #888; /* Your desired color */
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="input-icon">
<input class="form-control" name="username" placeholder="Username" type="text">
</span>
See fontAwesome content value cheat sheet here.
make the span relative and the icon absolute positioned.
.input-icon {position: relative; display: inline-block;}
.input-icon .fa {position: absolute; left: -30px; top: 0;}
You're using Font-Awesome and Bootstrap 3, so use the standard pattern.
There is a "disagreement" between Font-Awesome and Bootstrap about placement of the icon, but as the above link mentions, changing the icon <span> from
<span class="fa fa-user form-control-feedback" aria-hidden="true"></span>
to
<span class="form-control-feedback" aria-hidden="true">
<i class="fa fa-user"></i>
</span>
fixes that.
I want to create a rounded button in BS3 (a perfect circle), with a single fontawesome(4.0) icon in the center.
So far, I have the following code:
HTML:
<i class="fa fa-user"></i>
What would the CSS markup be to make this button a perfect circle?
you can do something like adding a class to add border radius
HTML:
<i class="fa fa-user"></i>
CSS:
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.42;
border-radius: 15px;
}
in case you wanted to change dimension you need to change the font size or padding accordingly
(Not cross-browser tested), but this is my answer:
.btn-circle {
width: 40px;
height: 40px;
line-height: 40px; /* adjust line height to align vertically*/
padding:0;
border-radius: 50%;
}
vertical center via the line-height property
padding becomes useless and must be reset
border-radius independant of the button size
Boostrap 3 has a component for exactly this. It's:
<span class="badge">100</span>
This is the best reference using font-awesome.
http://bootsnipp.com/snippets/featured/circle-button?
CSS:
.btn-circle { width: 30px; height: 30px; text-align: center;padding: 6px 0;font-size: 12px;line-height: 1.428571429;border-radius: 15px;}.btn-circle.btn-lg {width: 50px;height: 50px;padding: 10px 16px;font-size: 18px;line-height:1.33;border-radius: 25px;}
With Font Awesome ICONS, I used the following code to produce a round button/image with the color of your choice.
<code>
<span class="fa fa-circle fa-lg" style="color:#ff0000;"></span>
</code>
I had the same problem and came up with a very simple solution working for all (xs, sm, normal and lg) buttons more or less:
.btn-circle {
border-radius: 50%;
padding: 0.1em;
width:1.8em;
}
The difference between the btn-xs and -sm are only their padding. And this is not covered with this snippet. This snippet calculates the sizes based on the font-size only.
If you have downloaded these files locally then you can change following classes in bootstrap-social.css, just added border-radius: 50%;
.btn-social-icon.btn-lg{height:45px;width:45px;
padding-left:0;padding-right:0; border-radius: 50%; }
And here is teh HTML
<a class="btn btn-social-icon btn-lg btn-twitter" >
<i class="fa fa-twitter"></i>
</a>
<a class=" btn btn-social-icon btn-lg btn-facebook">
<i class="fa fa-facebook sbg-facebook"></i>
</a>
<a class="btn btn-social-icon btn-lg btn-google-plus">
<i class="fa fa-google-plus"></i>
</a>
It works smooth for me.
Use font-awesome stacked icons (alternative to bootstrap badges). Here are more examples: http://fontawesome.io/examples/
.no-border {
border: none;
background-color: white;
outline: none;
cursor: pointer;
}
.color-no-focus {
color: grey;
}
.hover:hover {
color: blue;
}
.white {
color: white;
}
<button type="button" (click)="doSomething()"
class="hover color-no-focus no-border fa-stack fa-lg">
<i class="color-focus fa fa-circle fa-stack-2x"></i>
<span class="white fa-stack-1x">1</span>
</button>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
To add a rounded border in any button the best way is to add the border-radius property. I belive this class is better because you can add-it at any button size. If you set the height and widht you will need to create a "rouding" class to each button size.
.btn-circle {
border-radius: 50%;
}
<button class='btn-circle'>Click Me!</button>
<button class='btn-circle'>?</button>