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>
Related
Why the button's text size is bigger than div->span's text size when both is set to 1em? How can I make them rendered to the same size?
Now firefox shows me the div's text as 17px high and 20px for the button's text.
.selectDateRangeBtn {
font-size: 1em;
text-align: center;
display: inline;
}
#searchRangeControl {
font-size: 1em;
display: inline;
}
<div id="searchRangeControl" >
<i class="fa fa-calendar"></i> <span>Some text</span> <i class="fa fa-caret-down"></i>
</div>
<button class="selectDateRangeBtn">2019-01-01</button>
The font-size is the same but the button is having a default font-family set by the user agent which is different from your div.
Use the same font-family (reset the font property) and you will have the same text size
.selectDateRangeBtn {
font:initial; /* reset the font */
font-size: 2em;
text-align: center;
display: inline;
}
#searchRangeControl {
font-size: 2em;
display: inline;
}
<div id="searchRangeControl" >
<i class="fa fa-calendar"></i> <span>2019-01-01</span> <i class="fa fa-caret-down"></i>
</div>
<button class="selectDateRangeBtn">2019-01-01</button>
I would like to do a space between 2 words in css for example:
1 RUNNING DAYS ADMIN#SUPER.BIZ
In HTML there is   but it's not correct to use   I think?
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc"><i class="far fa-calendar"></i> 1 RUNNING DAYS <i class="far fa-envelope"></i>ADMIN#SUPERBTC.BIZ</div>
</div>
How to do that in CSS ?
.sous-titre-bandeau-blanc{
font-family: 'Open Sans', sans-serif;
font-size: 13.3333px;
color: #474747;
padding-top: 14px;
padding-left: 28px;
padding-bottom: 15px;
}
Thank you
You can wrap your text in a p tag, and you can add a margin to that after making it inline-block.
Alternatively, you can make the container a flexbox, and use justify-content: space-between; but you'll need to group each icon with its respective text inside another div or span.
For example:
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc">
<span>
<i class="far fa-calendar" />
<p>1 RUNNING DAYS</p>
</span>
<span>
<i class="far fa-envelope" />
<p>ADMIN#SUPERBTC.BIZ</p>
</span>
</div>
</div>
<style>
.sous-titre-bandeau-blanc {
display: flex;
justify-content: space-between;
width: 450px;
}
</style>
I would do something like this, if I'm understanding you correctly
<style>
.space-between {
display: inline-block;
padding-left: 3em;
}
.space-between:first-child {
padding-left: 0;
}
</style>
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc">
<div class="space-between"><i class="far fa-calendar"></i> 1 RUNNING DAYS</div>
<div class="space-between"><i class="far fa-envelope"></i>ADMIN#SUPERBTC.BIZ<div>
</div>
</div>
Since you already have a .fa icon in the right part of your div just add it some left margin:
.sous-titre-bandeau-blanc .fa.fa-envelope { margin-left: 30px; }
Also, change your far for fa class to correctly display font-awesome icons
I want to get the style like this:
With my code I achieved like this:
Here is my code:
<div>
<a class="appointments" data-ng-click="showPrev(index)">
<i class="icon-double-angle-left"></i>
</a>{{date}}
<a data-ng-click="showNext(index)">
<i class="icon-double-angle-right"></i>
</a>
<div>
<span class="appointments" data-ng-repeat="time in times"><br>
<span data-ng-click="showModal()">{{time}}</span></span>
</div>
</div>
Can anyone please suggest me help. Thanks!
hope this help you to go in right direction...
Check the CSS
.time > span {
background-color: #F2F2F2;
color: #2AAAC7;
display: block;
width: 100px;
padding: 5px 25px;
margin: -5px;
text-align: center;
}
.date > i {
color: #2AAAC7;
}
<div>
<a class="appointments date" data-ng-click="showPrev(index)">
<i class="icon-double-angle-left"></i>
</a>
2017-06-29
<a data-ng-click="showNext(index)">
<i class="icon-double-angle-right"></i>
</a>
<div>
<span class="appointments time" data-ng-repeat="time in times"><br>
<span data-ng-click="showModal()">8:00 AM</span>
</span>
<span class="appointments time" data-ng-repeat="time in times"><br>
<span data-ng-click="showModal()">9:50 AM</span>
</span>
<span class="appointments time" data-ng-repeat="time in times"><br>
<span data-ng-click="showModal()">10:00 AM</span>
</span>
</div>
</div>
Use padding for the problem padding-top
using css then you can solve your problem.
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>
[1] [https://www.w3schools.com/css/tryit.asp?filename=trycss_table_striped]
[1]: refer for more informtion
I'm writing a "responsive design" layout and it's been kind of a headache so far. I decided to use the :before and vertical-align: middle; workaround to vertically align some text inside 'buttons', and it works on everything, except one button! The thing is, on refresh, Chrome Mobile will sometimes render it correctly, and sometimes it won't; it seems arbitrary, I haven't been able to find a pattern.
Here's how it should not look:
Here's how it should look:
Here's the relevant markup:
<div class="button">
<a href="/login">
<span class='button-container'>
<span class="button-icon">
<i class="fa fa-sign-in"></i>
</span><br/>
<span class="button-label">
Log In
</span>
</span>
</a>
</div>
<div class="button">
<a href="/signup">
<span class='button-container'>
<span class="button-icon">
<i class="fa fa-user-plus"></i>
</span><br/>
<span class="button-label">
Join Us!
</span>
</span>
</a>
</div>
And the CSS:
.button
{
display: inline-block;
text-align: center;
cursor: pointer;
overflow: hidden;
}
.button a
{
display: inline-block;
height: 100%;
}
.button a:before //So its contents vertically-align
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.button-container
{
display: inline-block;
vertical-align: middle;
text-align: center;
}
.button-icon
{
font-size: 180%;
}
.button-label
{
font-size: 90%;
}
It only happens with the "Log In" button (but I included two of them in case it helps). The buttons are contained within a div that has text-align: right;, in case that's relevant.
It renders well on Firefox Mobile, and on desktop, of course. I tested it on Chrome Beta v42, and the most recent version of regular Chrome Mobile, I guess maybe it's a Webkit thing, but I wonder if it's a known issue, and if there are any workarounds, or at least an explanation as to why it happens.
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>