search

FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.64k stars 12.19k forks source link

Icon Request: fa-calendar-clock (datetime) #8158

Closed amlynn18 closed 2 years ago

amlynn18 commented 8 years ago

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 commented 8 years ago

slightly refers to #1181

amlynn18 commented 8 years ago

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 commented 8 years ago

+1

nyon commented 8 years ago

I added an icon to nyon/fontawesome-actions@d142fa3a38e07d0b95977e9ef5e86a495e3a5559 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 commented 8 years ago

+1

cherrador commented 8 years ago

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 commented 8 years ago

+1

waynephipps commented 8 years ago

+1

wilmer737 commented 7 years ago

+1

tagliala commented 5 years ago

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 commented 4 years ago

+1

tagliala commented 3 years ago

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 commented 3 years ago

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

aethior commented 2 years ago

Hi @amlynn18,

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

Regards.

cc/ @tagliala

tagliala commented 2 years ago

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