Font-awesome caret up and caret down stacked on top of each other
You can achieve this using bootstrap grid system--
Working Example
<html>
<head> <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link data-require="fontawesome@4.4.0" data-semver="4.4.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head>
<body> <div class="col-md-6 col-xs-12"> <div class="pull-left row"> <div class="col-md-1 col-xs-1"> <div class="row"> <div class="col-md-12 col-xs-12"> <i class="fa fa-caret-up pull-left" aria-hidden="true"></i> </div> <div class="col-md-12 col-xs-12"> <i class="fa fa-caret-down pull-left" aria-hidden="true"></i> </div> </div> </div> <div class="col-md-8 col-xs-8"> <span style="padding-right: 8px">Worker</span> </div> </div> <div class="pull-left row"> <div class="col-md-1 col-xs-1"> <div class="row"> <div class="col-md-12 col-xs-12"> <i class="fa fa-caret-up pull-left" aria-hidden="true"></i> </div> <div class="col-md-12 col-xs-1"> <i class="fa fa-caret-down pull-left" aria-hidden="true"></i> </div> </div> </div> <div class="col-md-8 col-xs-8"> <span style="padding-right: 8px">Entitelment</span> </div> </div> <div class="pull-left row"> <div class="col-md-1 col-xs-1"> <div class="row"> <div class="col-md-12 col-xs-12"> <i class="fa fa-caret-up pull-left" aria-hidden="true"></i> </div> <div class="col-md-12 col-xs-12"> <i class="fa fa-caret-down pull-left" aria-hidden="true"></i> </div> </div> </div> <div class="col-md-8 col-xs-8"> <span style="padding-right: 8px">Request Date</span> </div> </div> </div> </body>
</html>Place Font-awesome caret up and caret down stacked adjacent
Try this once..
.arrow i { font-size: 50px; margin: 2px 0; padding: 0 3px; line-height: 20px;}.arrow { line-height: 1px;}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><div class="arrow up"><i class="fa fa-caret-up" aria-hidden="true"></i></div><div class="arrow down"><i class="fa fa-caret-down" aria-hidden="true"></i></div>Toggle FontAwesome Carets on Click with jQuery
There are few minor typos in your examples:
In https://jsfiddle.net/e74coz3f/
active-2is used instead ofactive-1In https://jsfiddle.net/c12tvgdj/ second
spanis not closed and the above problem also exists
Also, jQuery is not correctly installed and I get Uncaught ReferenceError: $ is not defined in JSFiddle console.
Lastly, I think this could be implemented in few simpler ways, e.g. https://jsfiddle.net/c7hwv0a6/1/ or https://jsfiddle.net/a18ju6bv/.
FontAwesome caret down does not appear in ngClass
It is strange, when reverse is true, it removes fa class from fa-caret-down.
This works,
<span><i class="fa" [ngClass]="{'fa-caret-down':reverse,'fa-caret-up':!reverse}" ></i></span>
edit: also you can use,
<span><i [ngClass]="reverse ? 'fa fa-caret-down': 'fa fa-caret-up'" ></i></span>
swap fa-caret right to Caret down using css or jquery method
Adjusting pseudo-element
/* Additional */
.nav-side-menu ul li:not(.collapsed) .arrow:before {
content: "\f0d7";
}
Explanation:
Since the class .collapsed is added whenever an accordion item is not open, we can use this as a selector to target.
And since there is no class to target accordion items when they are opened we will do this is by using :not() - the negation pseudo-class selector; which, in this case, will select list-item elements which do not have the class .collapsed - implying that they are opened.
The
:not()CSS pseudo-class represents elements that do not match a
list of selectors. Since it prevents specific items from being
selected, it is known as the negation pseudo-class.
Example
/* Selects any element that is NOT a paragraph */
:not(p) {
color: blue;
}
Source: :not() - CSS | MDN
Updated JSFiddle
.nav-side-menu { overflow: auto; font-family: verdana; font-size: 12px; font-weight: 200; background-color: #2e353d; position: fixed; top: 0px; width: 300px; height: 100%; color: #e1ffff;}.nav-side-menu .brand { background-color: #23282e; line-height: 50px; display: block; text-align: center; font-size: 14px;}.nav-side-menu .toggle-btn { display: none;}.nav-side-menu ul,.nav-side-menu li { list-style: none; padding: 0px; margin: 0px; line-height: 35px; cursor: pointer; /* .collapsed{ .arrow:before{ font-family: FontAwesome; content: "\f053"; display: inline-block; padding-left:10px; padding-right: 10px; vertical-align: middle; float:right; } }*/}.nav-side-menu ul :not(collapsed) .arrow:before,.nav-side-menu li :not(collapsed) .arrow:before { font-family: FontAwesome; content: "\f0da"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right;}.nav-side-menu ul .active,.nav-side-menu li .active { border-left: 3px solid #d19b3d; background-color: #4f5b69;}.nav-side-menu ul .sub-menu li.active,.nav-side-menu li .sub-menu li.active { color: #d19b3d;}.nav-side-menu ul .sub-menu li.active a,.nav-side-menu li .sub-menu li.active a { color: #d19b3d;}.nav-side-menu ul .sub-menu li,.nav-side-menu li .sub-menu li { background-color: #181c20; border: none; line-height: 28px; border-bottom: 1px solid #23282e; margin-left: 0px;}.nav-side-menu ul .sub-menu li:hover,.nav-side-menu li .sub-menu li:hover { background-color: #020203;}.nav-side-menu ul .sub-menu li:before,.nav-side-menu li .sub-menu li:before { font-family: FontAwesome; content: "\f105"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle;}.nav-side-menu li { padding-left: 0px; border-left: 3px solid #2e353d; border-bottom: 1px solid #23282e;}.nav-side-menu li a { text-decoration: none; color: #e1ffff;}.nav-side-menu li a i { padding-left: 10px; width: 20px; padding-right: 20px;}.nav-side-menu li:hover { border-left: 3px solid #d19b3d; background-color: #4f5b69; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;}@media (max-width: 767px) { .nav-side-menu { position: relative; width: 100%; margin-bottom: 10px; } .nav-side-menu .toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10 !important; padding: 3px; background-color: #ffffff; color: #000; width: 40px; text-align: center; } .brand { text-align: left !important; font-size: 22px; padding-left: 20px; line-height: 50px !important; }}@media (min-width: 767px) { .nav-side-menu .menu-list .menu-content { display: block; }}body { margin: 0px; padding: 0px;}
/* Additional */
.nav-side-menu ul li:not(.collapsed) .arrow:before { content: "\f0d7";}<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"><script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script><script src="/dist/scripts.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<div class="nav-side-menu"> <div class="brand">Brand Logo</div> <div class="menu-list"> <ul id="menu-content" class="menu-content"> <li> <a href="#"> <i class="fa fa-dashboard fa-lg"></i> Dashboard </a> </li>
<li data-toggle="collapse" data-target="#products" class="collapsed active"> <a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="products"> <li class="active"><a href="#">CSS3 Animation</a></li> <li><a href="#">General</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Tabs & Accordions</a></li> <li><a href="#">Typography</a></li> <li><a href="#">FontAwesome</a></li> <li><a href="#">Slider</a></li> <li><a href="#">Panels</a></li> <li><a href="#">Widgets</a></li> <li><a href="#">Bootstrap Model</a></li> </ul>
<li data-toggle="collapse" data-target="#service" class="collapsed"> <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="service"> <li>New Service 1</li> <li>New Service 2</li> <li>New Service 3</li> </ul>
<li data-toggle="collapse" data-target="#new" class="collapsed"> <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="new"> <li>New New 1</li> <li>New New 2</li> <li>New New 3</li> </ul>
<li> <a href="#"> <i class="fa fa-user fa-lg"></i> Profile </a> </li>
<li> <a href="#"> <i class="fa fa-users fa-lg"></i> Users </a> </li> </ul> </div></div>Change mat-sort-header ascending/descending icon to custom like font-awesome caret-down/caret-up Angular 8
you need to make display: none to other icons that are used for default icon. then use add content as CSS before selector and use content to show your font awesome icon.
[aria-sort="descending"] {
::ng-deep .mat-sort-header-arrow {
.mat-sort-header-indicator {
&::before {
content: "<i class='fa fa-caret-down'>...</i>";
top: -1.0em;
position: absolute;
}
}
}
}
Live Example: Stackblitz
How to eliminate gap between Font Awesome Icon and paragraph in React JS?
When you need to move something around precisely, you can use the transform CSS property with a translate value. For example, here you could try
.products-select {
transform: translateY(15px);
}
That will move the products-select down by 15px, you can adjust the value to whatever you need. (there's also translateX for a horizontal translation.)
Font Awesome not working, icons showing as squares
According to the documentation (step 3), you need to modify the supplied CSS file to point to the font location on your site.
on hover for icon-caret-down
Why are you using :before it doesn't seem relevant. Simply add :hover
.icon-caret-down:before{
content:"▼";
font-family:'arial';
speak:none;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
line-height:1;
-webkit-font-smoothing:antialiased;
vertical-align: baseline;
background-position: 0 0;
background-repeat: repeat;
margin-top: 0;
}
.icon-caret-down:hover{
color:red;
}
CLICK FOR DEMO
To hover when using :before use :hover:before
.icon-caret-down:before {
content:"\f0d7";
font-family:'fontawesome-alloy';
speak:none;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
line-height:1;
-webkit-font-smoothing:antialiased;
vertical-align: baseline;
background-position: 0 0;
background-repeat: repeat;
margin-top: 0;
cursor:pointer;background:#27a7eb; color: #FFF; border-radius:50%; font-size:14px; height:auto;margin-left:5px;padding: 1px 4px; width:auto;
}
.icon-caret-down:hover:before {
background:#b00;
}
CLICK FOR DEMO
Related Topics
Responsive Media Query Not Working in Google Chrome
How to Add Multiple Classes to Markdown Using Jekyll
React Js: Apply Material-Ui CSSbaseline
How to Center an Image Within a Col Element in Bootstrap 3+
How to Loop a CSS Animation with Multiple Keyframe Definitions
How to Prevent a Flex Item Height to Overflow Due to It's Content
Modal Dialog in Shiny: Can Adjust Width But Not Height
Override Vuetify 2.0 SASS Variable $Heading-Font-Family
CSS Start Repeating Background from Defined Position
How to Style Django Validation Errors with Bootstrap
Why Does The Overflow-Y Property Not Work with Percent Height
What Might Cause CSS to Fail to Load Occasionally on All Browsers
Can a Child Div Have a Higher Opacity Than Parent with CSS
R Shiny: Color Fileinput Button and Progress Bar