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!

[ghost]

+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

[ghost]

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.

[sensibleworld]

This is a quick update to let folks know that we’re refining our icon request workflow behind the scenes, and as part of that we’re going through all open requests and filing them into several new buckets to be addressed.

In this case we’ve added this issue to our new list to be created! We can’t promise any firm timelines right now, but this will help us keep track of it.

We’ll update this issue when the icon is released into the wild 🙂