Author: | atnbueno |
---|---|
Views Total: | 174 views |
Official Page: | Go to website |
Last Update: | October 21, 2020 |
License: | MIT |
Preview:

Description:
shortcut-icons.css is a CSS library that enables you to add iOS glyph icons (iOS 14, 13, or 12) to the webpage using CSS image sprite technology.
How to use it:
1. Upload the iOS glyph CSS image sprite to the server.
// iOS 12 glyphs ios12-glyphs.png // iOS 13 glyphs ios13-glyphs.png // iOS 14 glyphs ios14-glyphs.png
2. Load the shortcut-icons.css
in the document.
<link rel="stylesheet" href="shortcut-icons.css" />
3. Insert iOS glyphs into the webpage using a single DIV element as follows:
- .s43: 43x43px
- .s64: 64x64px
- .s86: 86x86px
- .s128: 128x128px
// iOS 14 <div class="shortcut-icon c4282601983 g59460 s64 " title="shortcut-icon c4282601983 g59460 s64 "></div> <div class="shortcut-icon c4274264319 g61482 s86 " title="shortcut-icon c4274264319 g61482 s86 "></div> <div class="shortcut-icon c2846468607 g61464 s43 " title="shortcut-icon c2846468607 g61464 s43 "></div> <div class="shortcut-icon c4292093695 g59670 s64 " title="shortcut-icon c4292093695 g59670 s64 "></div> <div class="shortcut-icon c3031607807 g61502 s128" title="shortcut-icon c3031607807 g61502 s128"></div> <div class="shortcut-icon c3679049983 g59736 s64 " title="shortcut-icon c3679049983 g59736 s64 "></div> <div class="shortcut-icon c431817727 g59494 s43 " title="shortcut-icon c431817727 g59494 s43 "></div> <div class="shortcut-icon c3980825855 g59752 s128" title="shortcut-icon c3980825855 g59752 s128"></div> <div class="shortcut-icon c2071128575 g59498 s43 " title="shortcut-icon c2071128575 g59498 s43 "></div> <div class="shortcut-icon c1440408063 g61487 s43 " title="shortcut-icon c1440408063 g61487 s43 "></div> <div class="shortcut-icon c4271458815 g59826 s64 " title="shortcut-icon c4271458815 g59826 s64 "></div> <div class="shortcut-icon g59738 s128" title="shortcut-icon g59738 s128"></div> <div class="shortcut-icon c431817727 g59657 s64 " title="shortcut-icon c431817727 g59657 s64 "></div> <div class="shortcut-icon c4292093695 g59745 s86 " title="shortcut-icon c4292093695 g59745 s86 "></div> <div class="shortcut-icon c4282601983 g59414 s86 " title="shortcut-icon c4271458815 g59414 s86 "></div> <div class="shortcut-icon c4274264319 g59719 s128" title="shortcut-icon c4274264319 g59719 s128"></div> <div class="shortcut-icon c1440408063 g59773 s86 " title="shortcut-icon c1440408063 g59773 s86 "></div> <div class="shortcut-icon c946986751 g59729 s128" title="shortcut-icon c946986751 g59729 s128"></div> <div class="shortcut-icon c255 g59770 s64 " title="shortcut-icon c255 g59770 s64 "></div> <div class="shortcut-icon c3679049983 g61465 s86 " title="shortcut-icon c3679049983 g61465 s86 "></div> <div class="shortcut-icon c4251333119 g59679 s43 " title="shortcut-icon c4251333119 g59679 s43 "></div> <div class="shortcut-icon c255 g59661 s86 " title="shortcut-icon c255 g59661 s86 "></div> <div class="shortcut-icon c463140863 g59751 s128" title="shortcut-icon c463140863 g59751 s128"></div> <div class="shortcut-icon c4274264319 g59763 s64 " title="shortcut-icon c463140863 g59763 s64 "></div> <div class="shortcut-icon c2071128575 g61447 s128" title="shortcut-icon c2071128575 g61447 s128"></div> <div class="shortcut-icon c3980825855 g59771 s86 " title="shortcut-icon c3980825855 g59771 s86 "></div> <div class="shortcut-icon c4274264319 g59662 s43 " title="shortcut-icon c4274264319 g59662 s43 "></div> <div class="shortcut-icon c4282601983 s64 " title="shortcut-icon c4282601983 s64 "></div> <div class="shortcut-icon c2071128575 g59787 s86 " title="shortcut-icon c2071128575 g59787 s86 "></div> <div class="shortcut-icon c3031607807 g59861 s43 " title="shortcut-icon c3031607807 g59861 s43 "></div> <div class="shortcut-icon c4282601983 g59511 s128" title="shortcut-icon c4282601983 g59511 s128"></div> <div class="shortcut-icon c463140863 g59710 s86 " title="shortcut-icon c463140863 g59710 s86 "></div> <div class="shortcut-icon g59649 s86 " title="shortcut-icon g59649 s86 "></div> <div class="shortcut-icon c463140863 g61519 s43 " title="shortcut-icon c463140863 g61519 s43 "></div> <div class="shortcut-icon c255 g59830 s128" title="shortcut-icon c255 g59830 s128"></div> <div class="shortcut-icon c4271458815 g59794 s86 " title="shortcut-icon c4282601983 g59794 s86 "></div> <div class="shortcut-icon c946986751 g59412 s86 " title="shortcut-icon c946986751 g59412 s86 "></div> <div class="shortcut-icon c946986751 g59696 s43 " title="shortcut-icon c946986751 g59696 s43 "></div> <div class="shortcut-icon c4271458815 g59712 s64 " title="shortcut-icon c4271458815 g59712 s64 "></div> <div class="shortcut-icon c4292093695 g61529 s43 " title="shortcut-icon c4292093695 g61529 s43 "></div> <div class="shortcut-icon c2071128575 g61505 s64 " title="shortcut-icon c2071128575 g61505 s64 "></div> <div class="shortcut-icon c3031607807 g59820 s86 " title="shortcut-icon c3031607807 g59820 s86 "></div> <div class="shortcut-icon c463140863 g61520 s64 " title="shortcut-icon c463140863 g61520 s64 "></div> <div class="shortcut-icon c1440408063 g59460 s64 " title="shortcut-icon c1440408063 g59460 s64 "></div> <div class="shortcut-icon c3980825855 g59852 s43 " title="shortcut-icon c3980825855 g59852 s43 "></div> <div class="shortcut-icon c463140863 g59704 s64 " title="shortcut-icon c463140863 g59704 s64 "></div> <div class="shortcut-icon c431817727 g59703 s86 " title="shortcut-icon c431817727 g59703 s86 "></div> <div class="shortcut-icon c4251333119 g59679 s86 " title="shortcut-icon c4251333119 g59679 s86 "></div> <div class="shortcut-icon s64 " title="shortcut-icon s64 "></div> <div class="shortcut-icon c255 g61440 s43 " title="shortcut-icon c255 g61440 s43 "></div> <div class="shortcut-icon c3031607807 g61499 s64 " title="shortcut-icon c3031607807 g61499 s64 "></div> <div class="shortcut-icon c2846468607 g59454 s64 " title="shortcut-icon c2846468607 g59454 s64 "></div> <div class="shortcut-icon c2071128575 g59726 s64 " title="shortcut-icon c2071128575 g59726 s64 "></div> <div class="shortcut-icon c2846468607 g59761 s86 " title="shortcut-icon c2846468607 g59761 s86 "></div> <div class="shortcut-icon c4271458815 g59514 s43 " title="shortcut-icon c4271458815 g59514 s43 "></div> <div class="shortcut-icon c4251333119 g59402 s128" title="shortcut-icon c4251333119 g59402 s128"></div> <div class="shortcut-icon c3679049983 g59445 s43 " title="shortcut-icon c3679049983 g59445 s43 "></div> <div class="shortcut-icon g61446 s86 " title="shortcut-icon g61446 s86 "></div> <div class="shortcut-icon c4282601983 g59793 s43 " title="shortcut-icon c4282601983 g59793 s43 "></div> <div class="shortcut-icon c3980825855 g61476 s64 " title="shortcut-icon c3980825855 g61476 s64 "></div> // iOS 13 <div class="ios13 shortcut-icon c4282601983 g59460 s64 " title="ios13 shortcut-icon c4282601983 g59460 s64 "></div> <div class="ios13 shortcut-icon c4274264319 g61482 s86 " title="ios13 shortcut-icon c4274264319 g61482 s86 "></div> <div class="ios13 shortcut-icon c2846468607 g61464 s43 " title="ios13 shortcut-icon c2846468607 g61464 s43 "></div> <div class="ios13 shortcut-icon c4292093695 g59670 s64 " title="ios13 shortcut-icon c4292093695 g59670 s64 "></div> <div class="ios13 shortcut-icon c3031607807 g61502 s128" title="ios13 shortcut-icon c3031607807 g61502 s128"></div> <div class="ios13 shortcut-icon c3679049983 g59736 s64 " title="ios13 shortcut-icon c3679049983 g59736 s64 "></div> <div class="ios13 shortcut-icon c431817727 g59494 s43 " title="ios13 shortcut-icon c431817727 g59494 s43 "></div> <div class="ios13 shortcut-icon c3980825855 g59752 s128" title="ios13 shortcut-icon c3980825855 g59752 s128"></div> <div class="ios13 shortcut-icon c2071128575 g59498 s43 " title="ios13 shortcut-icon c2071128575 g59498 s43 "></div> <div class="ios13 shortcut-icon c1440408063 g61487 s43 " title="ios13 shortcut-icon c1440408063 g61487 s43 "></div> <div class="ios13 shortcut-icon c4271458815 g59826 s64 " title="ios13 shortcut-icon c4271458815 g59826 s64 "></div> <div class="ios13 shortcut-icon g59738 s128" title="ios13 shortcut-icon g59738 s128"></div> <div class="ios13 shortcut-icon c431817727 g59657 s64 " title="ios13 shortcut-icon c431817727 g59657 s64 "></div> <div class="ios13 shortcut-icon c4292093695 g59745 s86 " title="ios13 shortcut-icon c4292093695 g59745 s86 "></div> <div class="ios13 shortcut-icon c4282601983 g59414 s86 " title="ios13 shortcut-icon c4271458815 g59414 s86 "></div> <div class="ios13 shortcut-icon c4274264319 g59719 s128" title="ios13 shortcut-icon c4274264319 g59719 s128"></div> <div class="ios13 shortcut-icon c1440408063 g59773 s86 " title="ios13 shortcut-icon c1440408063 g59773 s86 "></div> <div class="ios13 shortcut-icon c946986751 g59729 s128" title="ios13 shortcut-icon c946986751 g59729 s128"></div> <div class="ios13 shortcut-icon c255 g59770 s64 " title="ios13 shortcut-icon c255 g59770 s64 "></div> <div class="ios13 shortcut-icon c3679049983 g61465 s86 " title="ios13 shortcut-icon c3679049983 g61465 s86 "></div> <div class="ios13 shortcut-icon c4251333119 g59679 s43 " title="ios13 shortcut-icon c4251333119 g59679 s43 "></div> <div class="ios13 shortcut-icon c255 g59661 s86 " title="ios13 shortcut-icon c255 g59661 s86 "></div> <div class="ios13 shortcut-icon c463140863 g59751 s128" title="ios13 shortcut-icon c463140863 g59751 s128"></div> <div class="ios13 shortcut-icon c4274264319 g59763 s64 " title="ios13 shortcut-icon c463140863 g59763 s64 "></div> <div class="ios13 shortcut-icon c2071128575 g61447 s128" title="ios13 shortcut-icon c2071128575 g61447 s128"></div> <div class="ios13 shortcut-icon c3980825855 g59771 s86 " title="ios13 shortcut-icon c3980825855 g59771 s86 "></div> <div class="ios13 shortcut-icon c4274264319 g59662 s43 " title="ios13 shortcut-icon c4274264319 g59662 s43 "></div> <div class="ios13 shortcut-icon c4282601983 s64 " title="ios13 shortcut-icon c4282601983 s64 "></div> <div class="ios13 shortcut-icon c2071128575 g59787 s86 " title="ios13 shortcut-icon c2071128575 g59787 s86 "></div> <div class="ios13 shortcut-icon c3031607807 g59861 s43 " title="ios13 shortcut-icon c3031607807 g59861 s43 "></div> <div class="ios13 shortcut-icon c4282601983 g59511 s128" title="ios13 shortcut-icon c4282601983 g59511 s128"></div> <div class="ios13 shortcut-icon c463140863 g59710 s86 " title="ios13 shortcut-icon c463140863 g59710 s86 "></div> <div class="ios13 shortcut-icon g59649 s86 " title="ios13 shortcut-icon g59649 s86 "></div> <div class="ios13 shortcut-icon c463140863 g61519 s43 " title="ios13 shortcut-icon c463140863 g61519 s43 "></div> <div class="ios13 shortcut-icon c255 g59830 s128" title="ios13 shortcut-icon c255 g59830 s128"></div> <div class="ios13 shortcut-icon c4271458815 g59794 s86 " title="ios13 shortcut-icon c4282601983 g59794 s86 "></div> <div class="ios13 shortcut-icon c946986751 g59412 s86 " title="ios13 shortcut-icon c946986751 g59412 s86 "></div> <div class="ios13 shortcut-icon c946986751 g59696 s43 " title="ios13 shortcut-icon c946986751 g59696 s43 "></div> <div class="ios13 shortcut-icon c4271458815 g59712 s64 " title="ios13 shortcut-icon c4271458815 g59712 s64 "></div> <div class="ios13 shortcut-icon c4292093695 g61529 s43 " title="ios13 shortcut-icon c4292093695 g61529 s43 "></div> <div class="ios13 shortcut-icon c2071128575 g61505 s64 " title="ios13 shortcut-icon c2071128575 g61505 s64 "></div> <div class="ios13 shortcut-icon c3031607807 g59820 s86 " title="ios13 shortcut-icon c3031607807 g59820 s86 "></div> <div class="ios13 shortcut-icon c463140863 g61520 s64 " title="ios13 shortcut-icon c463140863 g61520 s64 "></div> <div class="ios13 shortcut-icon c1440408063 g59460 s64 " title="ios13 shortcut-icon c1440408063 g59460 s64 "></div> <div class="ios13 shortcut-icon c3980825855 g59852 s43 " title="ios13 shortcut-icon c3980825855 g59852 s43 "></div> <div class="ios13 shortcut-icon c463140863 g59704 s64 " title="ios13 shortcut-icon c463140863 g59704 s64 "></div> <div class="ios13 shortcut-icon c431817727 g59703 s86 " title="ios13 shortcut-icon c431817727 g59703 s86 "></div> <div class="ios13 shortcut-icon c4251333119 g59679 s86 " title="ios13 shortcut-icon c4251333119 g59679 s86 "></div> <div class="ios13 shortcut-icon s64 " title="ios13 shortcut-icon s64 "></div> <div class="ios13 shortcut-icon c255 g61440 s43 " title="ios13 shortcut-icon c255 g61440 s43 "></div> <div class="ios13 shortcut-icon c3031607807 g61499 s64 " title="ios13 shortcut-icon c3031607807 g61499 s64 "></div> <div class="ios13 shortcut-icon c2846468607 g59454 s64 " title="ios13 shortcut-icon c2846468607 g59454 s64 "></div> <div class="ios13 shortcut-icon c2071128575 g59726 s64 " title="ios13 shortcut-icon c2071128575 g59726 s64 "></div> <div class="ios13 shortcut-icon c2846468607 g59761 s86 " title="ios13 shortcut-icon c2846468607 g59761 s86 "></div> <div class="ios13 shortcut-icon c4271458815 g59514 s43 " title="ios13 shortcut-icon c4271458815 g59514 s43 "></div> <div class="ios13 shortcut-icon c4251333119 g59402 s128" title="ios13 shortcut-icon c4251333119 g59402 s128"></div> <div class="ios13 shortcut-icon c3679049983 g59445 s43 " title="ios13 shortcut-icon c3679049983 g59445 s43 "></div> <div class="ios13 shortcut-icon g61446 s86 " title="ios13 shortcut-icon g61446 s86 "></div> <div class="ios13 shortcut-icon c3980825855 g61476 s64 " title="ios13 shortcut-icon c3980825855 g61476 s64 "></div> // iOS 12 <div class="ios12 shortcut-icon c4282601983 g59460 s64 " title="ios12 shortcut-icon c4282601983 g59460 s64 "></div> <div class="ios12 shortcut-icon c4274264319 g61482 s86 " title="ios12 shortcut-icon c4274264319 g61482 s86 "></div> <div class="ios12 shortcut-icon c2846468607 g61464 s43 " title="ios12 shortcut-icon c2846468607 g61464 s43 "></div> <div class="ios12 shortcut-icon c4292093695 g59670 s64 " title="ios12 shortcut-icon c4292093695 g59670 s64 "></div> <div class="ios12 shortcut-icon c3031607807 g61502 s128" title="ios12 shortcut-icon c3031607807 g61502 s128"></div> <div class="ios12 shortcut-icon c3679049983 g59736 s64 " title="ios12 shortcut-icon c3679049983 g59736 s64 "></div> <div class="ios12 shortcut-icon c431817727 g59494 s43 " title="ios12 shortcut-icon c431817727 g59494 s43 "></div> <div class="ios12 shortcut-icon c3980825855 g59752 s128" title="ios12 shortcut-icon c3980825855 g59752 s128"></div> <div class="ios12 shortcut-icon c2071128575 g59498 s43 " title="ios12 shortcut-icon c2071128575 g59498 s43 "></div> <div class="ios12 shortcut-icon c1440408063 g61487 s43 " title="ios12 shortcut-icon c1440408063 g61487 s43 "></div> <div class="ios12 shortcut-icon c4271458815 g59826 s64 " title="ios12 shortcut-icon c4271458815 g59826 s64 "></div> <div class="ios12 shortcut-icon g59738 s128" title="ios12 shortcut-icon g59738 s128"></div> <div class="ios12 shortcut-icon c431817727 g59657 s64 " title="ios12 shortcut-icon c431817727 g59657 s64 "></div> <div class="ios12 shortcut-icon c4292093695 g59745 s86 " title="ios12 shortcut-icon c4292093695 g59745 s86 "></div> <div class="ios12 shortcut-icon c4282601983 g59414 s86 " title="ios12 shortcut-icon c4271458815 g59414 s86 "></div> <div class="ios12 shortcut-icon c4274264319 g59719 s128" title="ios12 shortcut-icon c4274264319 g59719 s128"></div> <div class="ios12 shortcut-icon c1440408063 g59773 s86 " title="ios12 shortcut-icon c1440408063 g59773 s86 "></div> <div class="ios12 shortcut-icon c946986751 g59729 s128" title="ios12 shortcut-icon c946986751 g59729 s128"></div> <div class="ios12 shortcut-icon c255 g59770 s64 " title="ios12 shortcut-icon c255 g59770 s64 "></div> <div class="ios12 shortcut-icon c3679049983 g61465 s86 " title="ios12 shortcut-icon c3679049983 g61465 s86 "></div> <div class="ios12 shortcut-icon c4251333119 g59679 s43 " title="ios12 shortcut-icon c4251333119 g59679 s43 "></div> <div class="ios12 shortcut-icon c255 g59661 s86 " title="ios12 shortcut-icon c255 g59661 s86 "></div> <div class="ios12 shortcut-icon c463140863 g59751 s128" title="ios12 shortcut-icon c463140863 g59751 s128"></div> <div class="ios12 shortcut-icon c4274264319 g59763 s64 " title="ios12 shortcut-icon c463140863 g59763 s64 "></div> <div class="ios12 shortcut-icon c2071128575 g61447 s128" title="ios12 shortcut-icon c2071128575 g61447 s128"></div> <div class="ios12 shortcut-icon c3980825855 g59771 s86 " title="ios12 shortcut-icon c3980825855 g59771 s86 "></div> <div class="ios12 shortcut-icon c4274264319 g59662 s43 " title="ios12 shortcut-icon c4274264319 g59662 s43 "></div> <div class="ios12 shortcut-icon c4282601983 s64 " title="ios12 shortcut-icon c4282601983 s64 "></div> <div class="ios12 shortcut-icon c2071128575 g59787 s86 " title="ios12 shortcut-icon c2071128575 g59787 s86 "></div> <div class="ios12 shortcut-icon c3031607807 g59861 s43 " title="ios12 shortcut-icon c3031607807 g59861 s43 "></div> <div class="ios12 shortcut-icon c4282601983 g59511 s128" title="ios12 shortcut-icon c4282601983 g59511 s128"></div> <div class="ios12 shortcut-icon c463140863 g59710 s86 " title="ios12 shortcut-icon c463140863 g59710 s86 "></div> <div class="ios12 shortcut-icon g59649 s86 " title="ios12 shortcut-icon g59649 s86 "></div> <div class="ios12 shortcut-icon c463140863 g61519 s43 " title="ios12 shortcut-icon c463140863 g61519 s43 "></div> <div class="ios12 shortcut-icon c255 g59830 s128" title="ios12 shortcut-icon c255 g59830 s128"></div> <div class="ios12 shortcut-icon c4271458815 g59794 s86 " title="ios12 shortcut-icon c4282601983 g59794 s86 "></div> <div class="ios12 shortcut-icon c946986751 g59412 s86 " title="ios12 shortcut-icon c946986751 g59412 s86 "></div> <div class="ios12 shortcut-icon c946986751 g59696 s43 " title="ios12 shortcut-icon c946986751 g59696 s43 "></div> <div class="ios12 shortcut-icon c4271458815 g59712 s64 " title="ios12 shortcut-icon c4271458815 g59712 s64 "></div> <div class="ios12 shortcut-icon c4292093695 g61529 s43 " title="ios12 shortcut-icon c4292093695 g61529 s43 "></div> <div class="ios12 shortcut-icon c2071128575 g61505 s64 " title="ios12 shortcut-icon c2071128575 g61505 s64 "></div> <div class="ios12 shortcut-icon c3031607807 g59820 s86 " title="ios12 shortcut-icon c3031607807 g59820 s86 "></div> <div class="ios12 shortcut-icon c463140863 g61520 s64 " title="ios12 shortcut-icon c463140863 g61520 s64 "></div> <div class="ios12 shortcut-icon c1440408063 g59460 s64 " title="ios12 shortcut-icon c1440408063 g59460 s64 "></div> <div class="ios12 shortcut-icon c3980825855 g59852 s43 " title="ios12 shortcut-icon c3980825855 g59852 s43 "></div> <div class="ios12 shortcut-icon c463140863 g59704 s64 " title="ios12 shortcut-icon c463140863 g59704 s64 "></div> <div class="ios12 shortcut-icon c431817727 g59703 s86 " title="ios12 shortcut-icon c431817727 g59703 s86 "></div> <div class="ios12 shortcut-icon c4251333119 g59679 s86 " title="ios12 shortcut-icon c4251333119 g59679 s86 "></div> <div class="ios12 shortcut-icon s64 " title="ios12 shortcut-icon s64 "></div> <div class="ios12 shortcut-icon c255 g61440 s43 " title="ios12 shortcut-icon c255 g61440 s43 "></div> <div class="ios12 shortcut-icon c3031607807 g61499 s64 " title="ios12 shortcut-icon c3031607807 g61499 s64 "></div> <div class="ios12 shortcut-icon c2846468607 g59454 s64 " title="ios12 shortcut-icon c2846468607 g59454 s64 "></div> <div class="ios12 shortcut-icon c2071128575 g59726 s64 " title="ios12 shortcut-icon c2071128575 g59726 s64 "></div> <div class="ios12 shortcut-icon c2846468607 g59761 s86 " title="ios12 shortcut-icon c2846468607 g59761 s86 "></div> <div class="ios12 shortcut-icon c4271458815 g59514 s43 " title="ios12 shortcut-icon c4271458815 g59514 s43 "></div> <div class="ios12 shortcut-icon c4251333119 g59402 s128" title="ios12 shortcut-icon c4251333119 g59402 s128"></div> <div class="ios12 shortcut-icon c3679049983 g59445 s43 " title="ios12 shortcut-icon c3679049983 g59445 s43 "></div> <div class="ios12 shortcut-icon g61446 s86 " title="ios12 shortcut-icon g61446 s86 "></div> <div class="ios12 shortcut-icon c4282601983 g59793 s43 " title="ios12 shortcut-icon c4282601983 g59793 s43 "></div> <div class="ios12 shortcut-icon c3980825855 g61476 s64 " title="ios12 shortcut-icon c3980825855 g61476 s64 "></div>
4. Override the default styles of the iOS glyphs.
.shortcut-icon { /* SVG partial icon grid and gray background color, visible only if no color class is used */ background-color: #7F7F7F7F; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" stroke="white" fill="none" stroke-width="0.5"><line x1="0%" y1="0%" x2="19.2%" y2="19.2%"/><line x1="80.8%" y1="80.8%" x2="100%" y2="100%"/><line x1="0%" y1="100%" x2="19.2%" y2="80.8%"/><line x1="80.8%" y1="19.2%" x2="100%" y2="0%"/><line x1="0%" y1="6%" x2="100%" y2="6%"/><line x1="0%" y1="31.5%" x2="15%" y2="31.5%"/><line x1="85%" y1="31.5%" x2="100%" y2="31.5%"/><line x1="0%" y1="50%" x2="15%" y2="50%"/><line x1="85%" y1="50%" x2="100%" y2="50%"/><line x1="0%" y1="68.5%" x2="15%" y2="68.5%"/><line x1="85%" y1="68.5%" x2="100%" y2="68.5%"/><line x1="0%" y1="94%" x2="100%" y2="94%"/><line x1="6%" y1="0%" x2="6%" y2="100%"/><line x1="31.5%" y1="0%" x2="31.5%" y2="15%"/><line x1="31.5%" y1="85%" x2="31.5%" y2="100%"/><line x1="50%" y1="0%" x2="50%" y2="15%"/><line x1="50%" y1="85%" x2="50%" y2="100%"/><line x1="68.5%" y1="0%" x2="68.5%" y2="15%"/><line x1="68.5%" y1="85%" x2="68.5%" y2="100%"/><line x1="94%" y1="0%" x2="94%" y2="100%"/><circle cx="50%" cy="50%" r="44%"/></svg>'); /* iCloud link icons show a radius/size ratio of 1/6, although the closest ratio of iOS app icons is 2/9 */ border-radius: calc(var(--icon-size) / 6); /* shadow imitates the appearance of iCloud link icons */ box-shadow: 0 calc(var(--icon-size) / 64) calc(var(--icon-size) / 32) 0 rgba(0, 0, 0, .14); box-sizing: border-box; display: inline-block; height: var(--icon-size); /* padding equivalent to 38/256, leaving 180/256 for the content */ padding: calc(var(--icon-size) / 6.7368421); width: var(--icon-size); }