New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Icon Request: fa-sort-date-asc & fa-sort-date-desc #4085
Comments
+1 would finish the sort-series .... |
Another +1 on this one. Tried stacking the sort and calendar-o icons to make something that works, but no luck there. Having some date sorting icons would be awesome! |
+1 |
over a year later .... I want this too! |
+1 |
5 similar comments
+1 |
+1 |
+1 |
+1 |
+1 |
You can roll your own by combining For example, the following HTML fa-long-arrow-down::before { content: "\f175"; } In similar fashion, you could place an arrow along with extra text by leveraging the .fa-custom-sort-date-asc::before { content: "\f175"; }
.fa-custom-sort-date-desc::before { content: "\f175"; }
.fa-custom-sort-date-asc::after { content: "JAN DEC";}
.fa-custom-sort-date-desc::after { content: "DEC JAN";} After that, you just need to style the text with a fixed width so it wraps to a new line and move it around positionally and adjust the size in CSS. Which will produce something like this: For comparison to the A→Z or the 1→9 icons, here's the regular Font Awesome Icons compared to the custom implementation with just arrows and characters And here's the same thing zoomed in for a closer look: Here's a full Demo in jsFiddleAnd here's the complete CSS styles (for consistency, I also added similar styles for the alphabetic and numeric characters to make sure they looked and behaved as similar as possible): .fa-custom-sort-date-asc,
.fa-custom-sort-date-desc{
position: relative;
width: 35px;
}
.fa-custom-sort-date-asc::before,
.fa-custom-sort-date-desc::before{
content: "\f175";
position: relative;
right: 7px;
}
.fa-custom-sort-date-asc::after,
.fa-custom-sort-date-desc::after{
position: absolute;
width: 18px;
top: 0px;
right: 0px;
font-size: 10px;
line-height: 9px;
font-family: "courier new",monospace;
font-weight: bold;
}
.fa-custom-sort-date-asc::after { content: "JAN DEC";}
.fa-custom-sort-date-desc::after{ content: "DEC JAN";}
.fa-custom-sort-alpha-asc,
.fa-custom-sort-alpha-desc,
.fa-custom-sort-numeric-asc,
.fa-custom-sort-numeric-desc{
position: relative;
}
.fa-custom-sort-alpha-asc::before,
.fa-custom-sort-alpha-desc::before,
.fa-custom-sort-numeric-asc::before,
.fa-custom-sort-numeric-desc::before{
content: "\f175";
position: relative;
right: 5px;
}
.fa-custom-sort-alpha-asc::after,
.fa-custom-sort-alpha-desc::after,
.fa-custom-sort-numeric-asc::after,
.fa-custom-sort-numeric-desc::after{
position: absolute;
width: 13px;
top: -1px;
right: 1px;
font-size: 11px;
line-height: 9px;
font-family: "courier new",monospace;
font-weight: bold;
}
.fa-custom-sort-numeric-asc::after,
.fa-custom-sort-numeric-desc::after{
font-family: monospace;
}
.fa-custom-sort-alpha-asc::after { content: "A Z";}
.fa-custom-sort-alpha-desc::after{ content: "Z A";}
.fa-custom-sort-numeric-asc::after { content: "1 9";}
.fa-custom-sort-numeric-desc::after{ content: "9 1";} |
+1 |
It's weird that this library doesn't have this option. @KyleMit's solution is cool, but is not i18l-friendly. Having a simple calendar icon next to up/down arrows would do the trick, I think. |
Same style as
fa-sort-alpha
,fa-sort-numeric
... but with a calendar beside the arrow.The text was updated successfully, but these errors were encountered: