Icon Request: fa-calendar-clock (datetime)

[amlynn18]

I'm working on a pattern that could benefit from an icon that combines both date and time. For example, a calendar with a clock in the bottom right corner.

[tagliala]

slightly refers to #1181

[amlynn18]

This is a good example of what we would need.

http://www.shutterstock.com/pic-341245148/stock-vector-day-time-vector-icon-with-additional-date-and-time-management-pictograms-style-is-flat-symbols.html

We can't use the one I linked above because our pattern library exclusively uses FontAwesome.

[PlassJ]

+1

[nyon]

I added an icon to nyon/fontawesome-actions@d142fa3 that could fit your purpose. It is not quite looking like the image you posted, but perhaps it could nevertheless be useful to you.

fa-calendar-clock-o

[zuck]

+1

[cherrador]

While this icon is added, alternative it can be done by extending the stack CSS. Added a sample here:

https://jsfiddle.net/cherrador/jomgLb2h/

[pitus]

+1

[waynephipps]

+1

[wilmer737]

+1

[tagliala]

This icon could be achieved with the SVG Framework

Example by @InsanityMeetsHH: https://codepen.io/anon/pen/KrzaeP

---

edit: this is a small variation by me: https://codepen.io/anon/pen/WYwyLz

[davequested]

+1

[tagliala]

Updating the example, the codepen does not seem to work anymore

Demo: https://jsfiddle.net/tagliala/L17f528g/472/

Ref:

https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms
https://fontawesome.com/how-to-use/on-the-web/styling/masking
https://fontawesome.com/how-to-use/on-the-web/styling/layering

[rarich01]

+1 Here is an example:
https://materialdesignicons.com/icon/calendar-clock

[aethior]

Hi @amlynn18,

This icon has been added in v6.0.0-BETA1.
Check https://fontawesome.com/icons/calendar-clock

Regards.

cc/ @tagliala

[tagliala]

This icon has been added to FA Pro

in a web application it is possible to create the requested icon with FA Free by using power transforms, masking, and layering features of the JS+SVG Framework.

Demo: https://jsfiddle.net/tagliala/bfa6uhse/57/

Ref:

https://fontawesome.com/how-to-use/on-the-web/styling/power-transform
https://fontawesome.com/how-to-use/on-the-web/styling/masking
https://fontawesome.com/how-to-use/on-the-web/styling/layering