I am making use of the following css to toggle a chervon, but the problem is at start-up the wrong chevron is display. As soon as you start the toggle, it works. Not sure what I'm doing wrong?
CSS:
.arrow-toggle .fa-chevron-down,
.arrow-toggle.collapsed .fa-chevron-right {
display: inline-block;
}
.arrow-toggle.collapsed .fa-chevron-down,
.arrow-toggle .fa-chevron-right {
display: none;
}
HTML:
<tr ng-repeat-start="foo in vm.bar track by $index"
data-toggle="collapse" data-target="#task{{$index}}"
class="arrow-toggle">
<td>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</td>
</tr>
See the Pen Chevron Toggle Issue by Richard (#Programm3r) on CodePen.
Thanks in advance!
add class collapsed to the tr initially
<tr ng-repeat-start="foo in vm.bar track by $index"
data-toggle="collapse" data-target="#task{{$index}}"
class="arrow-toggle collapsed">
<td>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</td>
</tr>
The .fa-chevron-down is hidden if the tr has the class .collapsed
.arrow-toggle.collapsed .fa-chevron-down,
.arrow-toggle .fa-chevron-right {
display: none;
}
http://codepen.io/anon/pen/LbWwdN
Related
I have a table and in one of the columns exists two icons.
here is the pic
this is the code:
<td>
<i class="zmdi zmdi-plus-circle-o text-success"></i>
<i class="zmdi zmdi-help zmdi-hc-fw" data-toggle="tooltip" data-placement="top" data-container="body" data-html="true" title="" data-original-title="ADD"></i>
</td>
I need the icons to be in the same line and the same height as the other icons.
So I added display: flex.
And get this result:
And since I need the icons to be in the same line as the other I used:
padding-top: 23px and get this results
The problem is when I hover with the mouse on the line, in this place exists the white or blank space.
The white space starts exactly after I used display flex, and reduces a little after I used padding top.
I do not want this white blank, so when I hover all the line will be blue as before (first pic).
can someone assist
this is my new code:
<td style="display: flex;padding-top: 23px;">
<i class="zmdi zmdi-plus-circle-o text-success"></i>
<i class="zmdi zmdi-help zmdi-hc-fw" data-toggle="tooltip" data-placement="top" data-container="body" data-html="true" title="" data-original-title="ADD"></i>
</td>
this is the computed tab
If I do this in the developer tools it solved, how to do it via code?
Take a look, I have created an example and it works, so you should check CSS code.
If you cannot provide CSS code how can I help?
table {
border: 1px solid red;
width: 50%;
}
<table>
<tr>
<td style="display: flex;">
<i style="width: 25px;height: 25px;border: 1px solid blue;display: unset;"
class="zmdi zmdi-plus-circle-o text-success"></i>
<i style="width: 25px;height: 25px;border: 1px solid blue;display: unset;"
class="zmdi zmdi-help zmdi-hc-fw"
data-toggle="tooltip"
data-placement="top"
data-container="body"
data-html="true" title=""
data-original-title="ADD">
</i>
</td>
</tr>
</table>
<i class="fa fa-toggle-off" style="color:red" ></i>
currently , I am using above class and style for toggle off icon
I want to show it as shown below
How can I do that?
Thanks in advance.
With that icon you cannot get what you want.
As an alternative, you can use fas fa-toggle-on and rotate it for 180deg.
CodePen: https://codepen.io/kitchup/pen/yYeMXE
//HTML
<span class="toggle-off">
<i class="fas fa-toggle-on"></i>
</span>
//CSS
.toggle-off{
display: inline-block;
font-size: 30px;
color: red;
transform: rotate(180deg);
}
<span style="color: red">
<i class="fa fa-toggle-off"></i>
</span>
You'll need to use something like this.
I need to put multiple fa icon a trophy that must be the container and inside a number. Something like this:
https://img.clipartfest.com/fc3163ee61d664e212d4bb9764702efa_trophy-clipart-black-and-white-trophy-number-1-clipart_1920-1920.jpeg
The code that I use is ( but is not work) :
<!-- create trophy -->
<i class="fa fa-trophy fa-4x" aria-hidden="true" style="color:#FF8000;"><span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x">1</i>
</span>
</i>
it is not work because the cirle is very big and it appears near to trophy and not above the trophy also the number 1 appears near the circle? Anyone can help me?
I believe you want something like this?
<i class="fa fa-trophy fa-2x"style="color:#FF8000;vertical-align:middle"></i>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x"style="color:#FF8000;">1</i>
</span>
The sizes can be changed with the font awesome classes. The font awesome stacking works by placing elements on increasing layers, so the first thing in the span will be on the bottom.
EDIT: moved trophy out and added styling to it. Although you generally shouldn't do styling like this
Your markup is wrong, try the following:
.trophy {
position: relative;
/* Parent needs to be taken out of normal document flow to center the number*/
}
.trophy__icon {
color: #FF8000;
}
/* Class to center the number */
.trophy__number {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: -6%;
text-align: center;
font-size: .5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack fa-lg trophy">
<i class="fa fa-circle fa-stack-2x trophy__background"></i>
<i class="fa fa-trophy fa-stack-1x trophy__icon"></i>
<div class="trophy__number">1</div>
</span>
I'm an aspiring web designer and need help with an issue I'm having. I have an icon in Font Awesome that I want to change colour/style when I hover on it.
Here is the default style I'd like to use:
CSS
.fa-circle {
color:red;
}
HTML:
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
</span>
http://jsfiddle.net/94n0zxbt/2/
and here is what I'd like to have it change to on hover:
http://jsfiddle.net/94n0zxbt/5/
CSS
.fa-circle {
color:white;
border-color: red;
border-radius: 90px;
border-style: solid;
}
.fa-arrow-right {
color: red;
}
HTML
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
</span>
Thanks,
Ashley
The reason the normal :hover css isn't working is that the <i> tags are overlapping each other. If you put the arrow <i> tag inside the circle <i> it will work:
http://jsfiddle.net/pjpwea/94n0zxbt/6/
You will notice that the arrow has gotten twice as big (I assume this is from the '2x' class), not super familiar with Font Awesome but there is probably an easy fix.
I want to stack the two Font Awesome icons fa-star and fa-star-half, but I am having alignment issues. See image below:
Here is my HTML:
<span class="fa-stack">
<i class="fa fa-fw fa-lg fa-star-half fa-stack-1x"></i>
<i class="fa fa-fw fa-lg fa-star fa-stack-1x"></i>
</span>
...and my CSS:
a-stack i.fa-star {
color:transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
}
.fa-stack i.fa-star-half {
color:yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
}
Note that I do not want to use fa-star-half-o which has an unappealing design when used with an outline.
I have tried to use "float," but without success. If I use "margin-left," the spacing is off. See image below:
Any help is appreciated. Thanks!
Jesse
Use the following margin-left to line up the image. Check it out here: https://jsfiddle.net/f63h157x/1/
.fa-stack i.fa-star-half {
color:yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
margin-left: -5px;
}
I think all you need to do is apply a text-align: left; to both of the <i /> elements and it should align properly without needing to use margin-left: 5px;
One viable solution is to use fa-star-half-o instead of fa-star-half.
<span class="fa-stack">
<i class="fa fa-fw fa-lg fa-star-half-o fa-stack-1x"></i>
<i class="fa fa-fw fa-lg fa-star fa-stack-1x"></i>
</span>
This way the width of the half-star is the same as the width of full stars, and your icons will stack up. No custom margins required.