html图标

2020-05-01 22:20 阅读 1,422 views 次 html图标已关闭评论
效果:https://weui.shanliwawa.top/demo/svg.html
支持chrome,ie11,ie8下显示空白位置。
代码:

<style type="text/css">
.i {
stroke: currentColor;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
width: 1em;
height: 1em;
margin: 0.4em;
}
svg, svgsymbol {
overflow: visible;
}
.i-large { font-size: 4em; margin: 0 }
.i-medium { font-size: 2em; margin: 0 }
.i-small { font-size: 1.5em; margin: 0 }
.i-large,
.i-medium,
.i-small { max-width: 50em; margin: 0auto2em }
</style>
<!-- Include the SVG -->
<svgxmlns="http://www.w3.org/2000/svg"style="display:none;"><symbolid="i-search"viewBox="0 0 32 32"><circlecx="14"cy="14"r="12"/><pathd="M23 23l7 7"/></symbol><symbolid="i-close"viewBox="0 0 32 32"><pathd="M2 30L30 2m0 28L2 2"/></symbol><symbolid="i-plus"viewBox="0 0 32 32"><pathd="M16 2v28M2 16h28"/></symbol><symbolid="i-minus"viewBox="0 0 32 32"><pathd="M2 16h28"/></symbol><symbolid="i-play"viewBox="0 0 32 32"><pathd="M10 2v28l14-14z"/></symbol><symbolid="i-pause"viewBox="0 0 32 32"><pathd="M23 2v28M9 2v28"/></symbol><symbolid="i-backwards"viewBox="0 0 32 32"><pathd="M16 2L2 16l14 14V16l14 14V2L16 16z"/></symbol><symbolid="i-forwards"viewBox="0 0 32 32"><pathd="M16 2l14 14-14 14V16L2 30V2l14 14z"/></symbol><symbolid="i-move"viewBox="0 0 32 32"><pathd="M3 16h26M16 3v26M12 7l4-4 4 4m-8 18l4 4 4-4m5-13l4 4-4 4M7 12l-4 4 4 4"/></symbol><symbolid="i-zoom-in"viewBox="0 0 32 32"><circlecx="14"cy="14"r="12"/><pathd="M23 23l7 7"/><pathd="M14 10v8m-4-4h8"/></symbol><symbolid="i-zoom-out"viewBox="0 0 32 32"><circlecx="14"cy="14"r="12"/><pathd="M23 23l7 7"/><pathd="M10 14h8"/></symbol><symbolid="i-zoom-reset"viewBox="0 0 32 32"><circlecx="14"cy="14"r="12"/><pathd="M23 23l7 7"/><pathd="M9 12V9h3m4 0h3v3M9 16v3h3m7-3v3h-3"/></symbol><symbolid="i-fullscreen"viewBox="0 0 32 32"><pathd="M4 12V4h8m8 0h8v8M4 20v8h8m16-8v8h-8"/></symbol><symbolid="i-fullscreen-exit"viewBox="0 0 32 32"><pathd="M4 12h8V4m8 0v8h8M4 20h8v8m16-8h-8v8"/></symbol><symbolid="i-star"viewBox="0 0 32 32"><pathd="M16 2l4 10h10l-8 7 3 11-9-7-9 7 3-11-8-7h10z"/></symbol><symbolid="i-checkmark"viewBox="0 0 32 32"><pathd="M2 20l10 8L30 4"/></symbol><symbolid="i-chevron-top"viewBox="0 0 32 32"><pathd="M30 20L16 8 2 20"/></symbol><symbolid="i-chevron-right"viewBox="0 0 32 32"><pathd="M12 30l12-14L12 2"/></symbol><symbolid="i-chevron-bottom"viewBox="0 0 32 32"><pathd="M30 12L16 24 2 12"/></symbol><symbolid="i-chevron-left"viewBox="0 0 32 32"><pathd="M20 30L8 16 20 2"/></symbol><symbolid="i-arrow-top"viewBox="0 0 32 32"><pathd="M6 10l10-8 10 8M16 2v28"/></symbol><symbolid="i-arrow-right"viewBox="0 0 32 32"><pathd="M22 6l8 10-8 10m8-10H2"/></symbol><symbolid="i-arrow-bottom"viewBox="0 0 32 32"><pathd="M6 22l10 8 10-8m-10 8V2"/></symbol><symbolid="i-arrow-left"viewBox="0 0 32 32"><pathd="M10 6L2 16l8 10M2 16h28"/></symbol><symbolid="i-caret-top"viewBox="0 0 32 32"><pathd="M30 22L16 6 2 22z"/></symbol><symbolid="i-caret-right"viewBox="0 0 32 32"><pathd="M10 30l16-14L10 2z"/></symbol><symbolid="i-caret-bottom"viewBox="0 0 32 32"><pathd="M30 10L16 26 2 10z"/></symbol><symbolid="i-caret-left"viewBox="0 0 32 32"><pathd="M22 30L6 16 22 2z"/></symbol><symbolid="i-start"viewBox="0 0 32 32"><pathd="M8 2v14L22 2v28L8 16v14"/></symbol><symbolid="i-end"viewBox="0 0 32 32"><pathd="M24 2v14L10 2v28l14-14v14"/></symbol><symbolid="i-eject"viewBox="0 0 32 32"><pathd="M30 18L16 5 2 18zM2 25h28"/></symbol><symbolid="i-mute"viewBox="0 0 32 32"><pathd="M20 16c0-8-5-14-5-14l-7 8H2v12h6l7 8s5-6 5-14z"/></symbol><symbolid="i-volume"viewBox="0 0 32 32"><pathd="M20 16c0-8-5-14-5-14l-7 8H2v12h6l7 8s5-6 5-14zm1-14s4 4 4 14-4 14-4 14m6-26s3 4 3 12-3 12-3 12"/></symbol><symbolid="i-ban"viewBox="0 0 32 32"><circlecx="16"cy="16"r="14"/><pathd="M6 6l20 20"/></symbol><symbolid="i-flag"viewBox="0 0 32 32"><pathd="M6 2v28M6 6h20l-6 6 6 6H6"/></symbol><symbolid="i-options"viewBox="0 0 32 32"><pathd="M28 6H4m24 10H4m24 10H4M24 3v6M8 13v6m12 4v6"/></symbol><symbolid="i-settings"viewBox="0 0 32 32"><pathd="M13 2v4l-2 1-3-3-4 4 3 3-1 2H2v6h4l1 2-3 3 4 4 3-3 2 1v4h6v-4l2-1 3 3 4-4-3-3 1-2h4v-6h-4l-1-2 3-3-4-4-3 3-2-1V2z"/><circlecx="16"cy="16"r="4"/></symbol><symbolid="i-heart"viewBox="0 0 32 32"><pathd="M4 16C1 12 2 6 7 4s8 2 9 4c1-2 5-6 10-4s5 8 2 12-12 12-12 12-9-8-12-12z"/></symbol><symbolid="i-clock"viewBox="0 0 32 32"><circlecx="16"cy="16"r="14"/><pathd="M16 8v8l4 4"/></symbol><symbolid="i-menu"viewBox="0 0 32 32"><pathd="M4 8h24M4 16h24M4 24h24"/></symbol><symbolid="i-msg"viewBox="0 0 32 32"><pathd="M2 4h28v18H16l-8 7v-7H2z"/></symbol><symbolid="i-photo"viewBox="0 0 32 32"><pathd="M20 24l-8-8L2 26V2h28v22m-14-4l6-6 8 8v8H2v-6"/><circlecx="10"cy="9"r="3"/></symbol><symbolid="i-camera"viewBox="0 0 32 32"><pathd="M2 8h7l3-4h8l3 4h7v18H2z"/><circlecx="16"cy="16"r="5"/></symbol><symbolid="i-video"viewBox="0 0 32 32"><pathd="M22 13l8-5v16l-8-5zM2 8v16h20V8z"/></symbol><symbolid="i-music"viewBox="0 0 32 32"><pathd="M11 25V6l13-3v20M11 13l13-3"/><ellipsecx="7"cy="25"rx="4"ry="5"/><ellipsecx="20"cy="23"rx="4"ry="5"/></symbol><symbolid="i-mail"viewBox="0 0 32 32"><pathd="M2 26h28V6H2zM2 6l14 10L30 6"/></symbol><symbolid="i-home"viewBox="0 0 32 32"><pathd="M12 20v10H4V12L16 2l12 10v18h-8V20z"/></symbol><symbolid="i-user"viewBox="0 0 32 32"><pathd="M22 11c0 5-3 9-6 9s-6-4-6-9 2-8 6-8 6 3 6 8zM4 30h24c0-9-6-10-12-10S4 21 4 30z"/></symbol><symbolid="i-signin"viewBox="0 0 32 32"><pathd="M3 16h20m-8-8l8 8-8 8m6-20h8v24h-8"/></symbol><symbolid="i-signout"viewBox="0 0 32 32"><pathd="M28 16H8m12-8l8 8-8 8m-9 4H3V4h8"/></symbol><symbolid="i-trash"viewBox="0 0 32 32"><pathd="M28 6H6l2 24h16l2-24H4m12 6v12m5-12l-1 12m-9-12l1 12m0-18l1-4h6l1 4"/></symbol><symbolid="i-paperclip"viewBox="0 0 32 32"><pathd="M10 9v15c0 4 3 6 6 6s6-2 6-6V6c0-3-2-4-4-4s-4 1-4 4v17c0 1 1 2 2 2s2-1 2-2V9"/></symbol><symbolid="i-file"viewBox="0 0 32 32"><pathd="M6 2v28h20V10l-8-8zm12 0v8h8"/></symbol><symbolid="i-folder"viewBox="0 0 32 32"><pathd="M2 26h28V7H14l-4-3H2zm28-14H2"/></symbol><symbolid="i-folder-open"viewBox="0 0 32 32"><pathd="M4 28h24l2-16H14l-4-4H2zm24-16V4H4v4"/></symbol><symbolid="i-work"viewBox="0 0 32 32"><pathd="M30 8H2v18h28zM20 8s0-4-4-4-4 4-4 4M8 26V8m16 18V8"/></symbol><symbolid="i-portfolio"viewBox="0 0 32 32"><pathd="M29 17v11H3V17M2 8h28v8s-6 4-14 4-14-4-14-4V8zm14 14v-4m4-10s0-4-4-4-4 4-4 4"/></symbol><symbolid="i-eye"viewBox="0 0 32 32"><circlecx="17"cy="15"r="1"/><circlecx="16"cy="16"r="6"/><pathd="M2 16S7 6 16 6s14 10 14 10-5 10-14 10S2 16 2 16z"/></symbol><symbolid="i-bookmark"viewBox="0 0 32 32"><pathd="M6 2h20v28L16 20 6 30z"/></symbol><symbolid="i-tag"viewBox="0 0 32 32"><circlecx="24"cy="8"r="2"/><pathd="M2 18L18 2h12v12L14 30z"/></symbol><symbolid="i-lightning"viewBox="0 0 32 32"><pathd="M18 13l8-11L8 13l6 6-8 11 18-11z"/></symbol><symbolid="i-activity"viewBox="0 0 32 32"><pathd="M4 16h7l3 13 4-26 3 13h7"/></symbol><symbolid="i-location"viewBox="0 0 32 32"><circlecx="16"cy="11"r="4"/><pathd="M24 15c-3 7-8 15-8 15s-5-8-8-15 2-13 8-13 11 6 8 13z"/></symbol><symbolid="i-export"viewBox="0 0 32 32"><pathd="M28 22v8H4v-8M16 4v20M8 12l8-8 8 8"/></symbol><symbolid="i-import"viewBox="0 0 32 32"><pathd="M28 22v8H4v-8M16 4v20m-8-8l8 8 8-8"/></symbol><symbolid="i-inbox"viewBox="0 0 32 32"><pathd="M2 15v10h28V15l-4-8H6zm0 0h8s1 5 6 5 6-5 6-5h8"/></symbol><symbolid="i-archive"viewBox="0 0 32 32"><pathd="M4 10v18h24V10M2 4v6h28V4zm10 11h8"/></symbol><symbolid="i-reply"viewBox="0 0 32 32"><pathd="M10 6l-7 8 7 8m-7-8h15c8 0 12 4 12 12"/></symbol><symbolid="i-edit"viewBox="0 0 32 32"><pathd="M30 7l-5-5L5 22l-2 7 7-2zm-9-1l5 5zM5 22l5 5z"/></symbol><symbolid="i-compose"viewBox="0 0 32 32"><pathd="M27 15v15H2V5h15m13 1l-4-4L9 19l-2 6 6-2zm-8 0l4 4zM9 19l4 4z"/></symbol><symbolid="i-upload"viewBox="0 0 32 32"><pathd="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12-4l5-4 5 4m-5-4v15"/></symbol><symbolid="i-download"viewBox="0 0 32 32"><pathd="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></symbol><symbolid="i-send"viewBox="0 0 32 32"><pathd="M2 16L30 2 16 30l-4-10zM30 2L12 20"/></symbol><symbolid="i-link"viewBox="0 0 32 32"><pathd="M18 8s6-6 9-3 2 7-3 11-8 5-10 1m0 7s-6 6-9 3-2-7 3-11 8-5 10-1"/></symbol><symbolid="i-code"viewBox="0 0 32 32"><pathd="M10 9l-7 8 7 8M22 9l7 8-7 8M18 7l-4 20"/></symbol><symbolid="i-lock"viewBox="0 0 32 32"><pathd="M5 15v15h22V15zm4 0C9 9 9 5 16 5s7 4 7 10m-7 5v3"/><circlecx="16"cy="24"r="1"/></symbol><symbolid="i-unlock"viewBox="0 0 32 32"><pathd="M5 15v15h22V15zm4 0C9 7 9 3 16 3s7 5 7 6m-7 11v3"/><circlecx="16"cy="24"r="1"/></symbol><symbolid="i-bell"viewBox="0 0 32 32"><pathd="M8 17c0-5 1-11 8-11s8 6 8 11 3 8 3 8H5s3-3 3-8zm12 8s0 4-4 4-4-4-4-4m4-22v3"/></symbol><symbolid="i-book"viewBox="0 0 32 32"><pathd="M16 7S9 1 2 6v22c7-5 14 0 14 0s7-5 14 0V6c-7-5-14 1-14 1zm0 0v21"/></symbol><symbolid="i-calendar"viewBox="0 0 32 32"><pathd="M2 6v24h28V6zm0 9h28M7 3v6m6-6v6m6-6v6m6-6v6"/></symbol><symbolid="i-print"viewBox="0 0 32 32"><pathd="M7 25H2V9h28v16h-5M7 19v11h18V19zM25 9V2H7v7m15 5h3"/></symbol><symbolid="i-alert"viewBox="0 0 32 32"><pathd="M16 3l14 26H2zm0 8v8m0 4v2"/></symbol><symbolid="i-info"viewBox="0 0 32 32"><pathd="M16 14v9m0-15v2"/><circlecx="16"cy="16"r="14"/></symbol><symbolid="i-creditcard"viewBox="0 0 32 32"><pathd="M2 7v18h28V7zm3 11h4m-4 3h6"/><pathd="M2 11v2h28v-2z"fill="currentColor"/></symbol><symbolid="i-cart"viewBox="0 0 32 32"><pathd="M6 6h24l-3 13H9m18 4H10L5 2H2"/><circlecx="25"cy="27"r="2"/><circlecx="12"cy="27"r="2"/></symbol><symbolid="i-bag"viewBox="0 0 32 32"><pathd="M5 9v20h22V9zm5 0s0-6 6-6 6 6 6 6"/></symbol><symbolid="i-gift"viewBox="0 0 32 32"><pathd="M4 14v16h24V14M2 9v5h28V9zm14 0s-2-9-8-6 8 6 8 6 2-9 8-6-8 6-8 6m0 0v21"/></symbol><symbolid="i-external"viewBox="0 0 32 32"><pathd="M14 9H3v20h20V18M18 4h10v10m0-10L14 18"/></symbol><symbolid="i-reload"viewBox="0 0 32 32"><pathd="M29 16c0 6-5 13-13 13S3 22 3 16 8 3 16 3c5 0 9 3 11 6m-7 1l7-1 1-7"/></symbol><symbolid="i-clipboard"viewBox="0 0 32 32"><pathd="M12 2v4h8V2h-8zm-1 2H6v26h20V4h-5"/></symbol><symbolid="i-filter"viewBox="0 0 32 32"><pathd="M2 5s4-2 14-2 14 2 14 2L19 18v9l-6 3V18L2 5z"/></symbol><symbolid="i-feed"viewBox="0 0 32 32"><circlecx="6"cy="26"r="2"fill="currentColor"/><pathd="M4 15c7 0 13 6 13 13M4 6c13 0 22 9 22 22"/></symbol><symbolid="i-moon"viewBox="0 0 32 32"><pathd="M14 2C9 2 3 7 3 15s6 14 14 14 13-6 13-11C19 25 7 13 14 2z"/></symbol><symbolid="i-microphone"viewBox="0 0 32 32"><pathd="M16 2c-4 0-4 4-4 4v10s0 4 4 4 4-4 4-4V6s0-4-4-4zM8 17s0 7 8 7 8-7 8-7M13 29h6m-3-5v5"/></symbol><symbolid="i-telephone"viewBox="0 0 32 32"><pathd="M3 12c0-7 7-7 13-7s13 0 13 7c0 8-7-1-7-1H10s-7 9-7 1zm8 2s-5 5-5 14h20c0-9-5-14-5-14H11z"/><circlecx="16"cy="21"r="4"/></symbol><symbolid="i-desktop"viewBox="0 0 32 32"><pathd="M10 29s0-5 6-5 6 5 6 5H10zM2 6v17h28V6H2z"/></symbol><symbolid="i-mobile"viewBox="0 0 32 32"><pathd="M21 2H11c-1 0-2 1-2 2v24c0 1 1 2 2 2h10c1 0 2-1 2-2V4c0-1-1-2-2-2zM9 5h14M9 27h14"/></symbol><symbolid="i-ellipsis-horizontal"viewBox="0 0 32 32"><circlecx="7"cy="16"r="2"/><circlecx="16"cy="16"r="2"/><circlecx="25"cy="16"r="2"/></symbol><symbolid="i-ellipsis-vertical"viewBox="0 0 32 32"><circlecx="16"cy="7"r="2"/><circlecx="16"cy="16"r="2"/><circlecx="16"cy="25"r="2"/></symbol><symbolid="i-twitter"viewBox="0 0 64 64"><pathstroke-width="0"fill="currentColor"d="M60 16l-6 1 4-5-7 2c-9-10-23 1-19 10C16 24 8 12 8 12s-6 9 4 16l-6-2c0 6 4 10 11 12h-7c4 8 11 8 11 8s-6 5-17 5c33 16 53-14 50-30z"/></symbol><symbolid="i-github"viewBox="0 0 64 64"><pathstroke-width="0"fill="currentColor"d="M32 0C14 0 0 14 0 32c0 21 19 30 22 30 2 0 2-1 2-2v-5c-7 2-10-2-11-5 0 0 0-1-2-3-1-1-5-3-1-3 3 0 5 4 5 4 3 4 7 3 9 2 0-2 2-4 2-4-8-1-14-4-14-15 0-4 1-7 3-9 0 0-2-4 0-9 0 0 5 0 9 4 3-2 13-2 16 0 4-4 9-4 9-4 2 7 0 9 0 9 2 2 3 5 3 9 0 11-7 14-14 15 1 1 2 3 2 6v8c0 1 0 2 2 2 3 0 22-9 22-30C64 14 50 0 32 0z"/></symbol></svg>
<br>
<strong><svgclass="i"style="width: 24px;height: 24px;vertical-align:middle"><usexlink:href="#i-settings"></use></svg>版本说明:</strong><br>支持安卓3.3版本及以上的手机和平板。<br>安装包大小:45M
版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:html图标 | 文档
分类:电脑技术 标签:

评论已关闭!