网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
shortcut-icons.css可以帮助你使用CSS Sprite技术向网页添加iOS字形图标支持(ios 12、13、14)。
使用方法:
1.将iOS glyph CSS Sprite图像上传到服务器。
// iOS 12 glyphs
ios12-glyphs.png
// iOS 13 glyphs
ios13-glyphs.png
// iOS 14 glyphs
ios14-glyphs.png
2.html页面中加载shortcut-icons.css样式文件
<link rel="stylesheet" href="shortcut-icons.css" />
3.使用单个DIV元素将iOS glyphs插入到网页中,如下所示:
.s43:43x43像素
.s64:64x64像素
.s86:86x86px
.s128节:128x128像素
// 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.覆盖iOS标志符号的默认样式。
.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);
}
转载请注明来源:CSS Sprite iOS字形图标(shortcut-icons.css)
本文永久链接地址:https://www.moyouyouw.cn/code/689.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论