I have a simple tag with fontawesome class.
<div class="bh-header-menu-ct bh-left">
<a href="javascript:void(0)" class="bh-menu-icon bh-circle bh-color-700 bh-ripple" (click)="onToggle()">
<i class="fa fa-align-center"></i>
</a>
</div>
.bh-header-menu-ct{
height: inherit;
line-height: 60px;
padding: 0 10px;
.bh-menu-icon{
padding: 10px;
}
}
On IE Its behaving bit wiered
Edit: Code indentation
Related
I am using Kendo Grid to display Grid view of data. I have a column with button that, when clicked, shows a list of options on top of the page and left to the button.
I am not using Kendo Popup or context menu, but just using ng-template with structural directive logic.
What i look for?
What i get?
This is my Kendo grid column:
<div style="position: relative">
<kendo-grid>
...
<kendo-grid-column title="SAMPLE">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div class="context-dropdown-menu" *ngIf="showIndex === rowIndex && showDialog" style="position: absolute;">
<ul>
<li> <i class="fa fa-envelope"></i> Item2.1 </li>
<li> <i class="fa fa-envelope"></i> Item2.2 </li>
<li> <i class="fa fa-envelope"></i> Item2.3 </li>
</ul>
<div>
<button type="button" (click)="clicked(rowIndex)"> Click </button>
</ng-template>
</kendo-grid-column>
...
</kendo-grid>
</div>
Thanks in advance!
Replace below style in your stackblitz example it will work fine.
.context-dropdown-menu {
margin: 0 -10.75rem;
padding: 0px;
width: 170px;
z-index: 999999;
}
.context-dropdown-menu ul {
margin: 0px;
padding: 0px;
list-style: none;
background: #e4e4e4
}
.context-dropdown-menu ul li {
font-size: 13px;
padding: 7px 10px;
border-bottom: 1px solid #efefef;
color: #617189;
cursor: pointer;
}
.context-dropdown-menu ul li:hover {
background: #f5f5f5;
}
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 am currently working on this website and as you can see I have 2 modals, one on the left and one on the right (the i icons).
What I want to do is to keep the modal buttons in the same position but make the whole section (the pictures with the girl and the texts) clickable.
Infos: I can only use that "i" icon as modal button :/ and I can only edit the CSS not the HTML.
Is this possible to open the modal window by clicking on the whole section?
Here some code:
HTML:
<div id="ts-vcsc-modal-5397504-container" class="ts-vcsc-modal-container">
<div id="ts-vcsc-modal-5397504-trigger" style="" class="ts-vcsc-modal-5397504-parent nch-holder ts-vcsc-font-icon ts-font-icons ts-shortcode ts-icon-align-center ">
<a href="#ts-vcsc-modal-5397504" class="nch-lightbox-modal no-ajaxy" data-width="1024" data-title="" data-open="false" data-delay="0" data-type="html" rel="" data-effect="slideUp" data-share="0" data-duration="5000" data-color="rgba(255,255,255,0.01)" data-lightbox-init="true">
<i class="ts-font-icon ts-awesome-info-circle" style="color: #ffffff; width:80px; height:80px; font-size:80px; line-height:80px;"></i></a></div>
<div id="ts-vcsc-modal-5397504" class="ts-modal-content nch-hide-if-javascript " style="display: none; padding: 15px; background: #0076bc;">
<div class="ts-modal-white-header"></div><div class="ts-modal-white-frame" style=""><div class="ts-modal-white-inner"><p></p>
<h2 style="text-align: left;"><span style="color: #ffffff;"><b>Wer seinen Mietvertrag im AQUILA bis 31.12.2016 unterzeichnet, erhält</b></span></h2>
<p><span style="color: #ffffff;">1 Nettomietzins geschenkt bei Einzug innert 3 Monaten</span><br>
<span style="color: #ffffff;"> 2 Nettomietzinse geschenkt bei Einzug per Dezember 2016</span></p>
<p><span style="color: #ffffff;">Zusätzlicher Weihnachtsgutschein von Sutter Begg oder AJ Salon hair & make up im Wert von CHF 1000.–</span></p>
</div>
</div>
</div>
</div>
Thanks in advice for your help.
.nch-lightbox-modal.no-ajaxy {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}
.ts-font-icon.ts-awesome-info-circle {
color: #ffffff;
width: 80px;
height: 80px;
font-size: 80px;
line-height: 80px;
position: absolute;
bottom: 25px;
right: 0;
}
Try this to your anchor tag and icon
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>
Is there is a simple way to stylize the Fontawesome icons background properly?
I was trying to do it with the icon-remove-sign (which has the particularity to be a circle) icon in order to make appear the cross in white and the circle in red.
The difficulty is that the icon is recognize as a square, so i was trying to make it a circle in order to apply the red background color (but i am wondering if there is not something simpler):
.icon-remove-sign {
padding: 0;
border-radius: 25px;
color: white;
background-color: red;
}
But it's not enough, we can see the red background at the top of the icon.
How would you do it ?
With fontawesome you can use stacked icons like this:
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
It feels a little hacky, but I managed to get it working here:
http://jsfiddle.net/3FvxA/
display:block and giving it a height and width seems to be the secret.
Assuming that your HTML looks like this:
<div class="social-circle">
<a class="fa fa-facebook" href="#"></a>
<a class="fa fa-twitter" href="#"></a>
<a class="fa fa-pinterest-p" href="#"></a>
</div>
You can do something like:
.social-circle [class*="fa fa-"] {
width: 25px;
height: 25px;
color: white;
background-color: grey;
border-radius: 25px;
display: inline-block;
line-height: 25px;
margin: auto 3px;
font-size: 15px;
text-align: center;
}
.fa-facebook:hover {
background-color: #3B5A9B;
}
.fa-twitter:hover {
background-color: #4FC6F8;
}
.fa-pinterest-p:hover {
background-color: #CA2128;
}
See the example here : http://jsfiddle.net/k69xj2n8/