Font-awesome: Icon Request: fa-sort-date-asc & fa-sort-date-desc

[schettino72]

Same style as fa-sort-alpha, fa-sort-numeric... but with a calendar beside the arrow.

[fschaeffer]

+1 would finish the sort-series ....

[pyornkrachzark]

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!

[timthez]

+1

[scottselby]

over a year later .... I want this too!

[mkapteijns]

+1

[deseman]

+1

[cstoffer]

+1

[Timmer247]

+1

[MrBemd]

+1

[yzinkovets]

+1

[KyleMit]

You can roll your own by combining .fa-long-arrow-down with text representing month sort options, and then adjust their positioning to fit a single icon.

For example, the following HTML <i class="fa fa-long-arrow-down"></i> works by adding this style:

fa-long-arrow-down::before { content: "\f175"; }

In similar fashion, you could place an arrow along with extra text by leveraging the ::after pseudo element like this:

.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 jsFiddle

And 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";}

[kylebamfordpc]

+1

[bmueller-sykes]

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.