滑动继续阅读»
新意优选 - 天猫小黑盒_-_全球新品5折起购

如何在网站上使用W3.org SVG图标?

我们经常浏览网站中的元素,并不断看到类似以下内容:

<svg width="13" height="13" viewBox="0 0 13 13" version="1.1"
xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" data-ui-test="undefined-svg">
<use x="0" y="0" width="13" height="13" xlink:href="/images/icons/icon_definitions.svg#heart"></use></svg>

那么如何使用相关图标在我们的网站?在此,我们可以尝试去W3.org找出方法,但是如果可以的话,如何做还不是很清楚。下面就简单列出几个样式仅供参考!

如果在某些文本编辑器中打开任何.svg文件,你将看到类似的代码。它只是用XML语言描述的二维向量,可以直接在HTML中使用。

SVG是一种基于XML的语言,用于描述二维矢量和矢量/光栅混合图形。来源:w3.org/TR/SVG2/

例如,可以查看iconsvg.xyz或者icomoon.io。每个图标都可以以.svg格式下载,但是你可以在下载按钮上方看到它们的代码。

为你的项目快速定制SVG图标。

简单轮廓图标,可选择图标大小,宽度,形状,棱角,颜色以及SVG,JSX,React等;

ICONSVG - 快速可自定义的SVG图标

社媒品牌徽标,可选择图标大小,宽度,形状,棱角,颜色以及SVG,JSX,React等;

ICONSVG - 快速可自定义的SVG图标

以下是代码颜色区分,可直接贴到页脚footer.php底部然后更改自己需要展示的图标即可:

» 展开阅读全文...


ICONSVG - 快速可自定义的SVG图标样式一:蓝色

<style>
        .btn.download-theme {
            position: fixed;
            bottom: 10px;
            left: 20px;
            margin-bottom: 60px;
            height: 60px;
            background: rgba(33, 150, 243, 0.25);
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,.07);
            -webkit-border-radius: 30px;
            border-radius: 30px;
            color: #fff;
            padding: 0 10px 0 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            z-index: 1000;
            font-size: 0;
            -webkit-transition: all cubic-bezier(.4,0,.2,1) .4s;
            -o-transition: all cubic-bezier(.4,0,.2,1) .4s;
            transition: all cubic-bezier(.4,0,.2,1) .4s;
        }		
        .btn.download-theme svg{
            width:20px;
            fill:#fff;
            height:20px;
        }
        .btn.download-theme i.icon {
            height: 40px;
            width: 40px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            position: relative;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            background-color: #2196F3;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            margin: 10px 0 10px 10px;
            transition: all cubic-bezier(.4,0,.2,1) .4s;
        }
        .btn.download-theme i.icon:after {
            content: "";
            position: fixed;
            display: block;
            height: 60px;
            width: 60px;
            background: rgba(33, 150, 243, 0.3);
            z-index: -1;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -webkit-animation: 3s ease-in-out infinite pulse;
            animation: 3s ease-in-out infinite pulse;
        }	
        
        .btn.download-theme:hover {
            background-color: #2196F3;
            font-size: inherit;
            padding-right: 15px;
            border-color:#2196F3;
            -webkit-transition: all cubic-bezier(.4,0,.2,1) .4s;
                -o-transition: all cubic-bezier(.4,0,.2,1) .4s;
                transition: all cubic-bezier(.4,0,.2,1) .4s;
        }
        @-webkit-keyframes pulse{
            0%,100%,55%{
                -webkit-transform:scale(1);
                transform:scale(1);
                opacity:0
            }
            25%{
                -webkit-transform:scale(1.6);
                transform:scale(1.6);
                opacity:1
            }
        }
        @keyframes pulse{
            0%,100%,55%{
                -webkit-transform:scale(1);
                transform:scale(1);
                opacity:0
            }
            25%{
                -webkit-transform:scale(1.6);
                transform:scale(1.6);
                opacity:1
            }
        }
        
    </style>
<a target="_blank" class="download-theme btn" href="#">
        <i class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/></svg></i>
        点击下载
    </a>

ICONSVG - 快速可自定义的SVG图标样式二:橙色

<style>
        .btn.purchase-theme {
            position: fixed;
            bottom: 10px;
            left: 20px;
            margin-bottom: 60px;
            height: 60px;
            background: rgba(255, 152, 0, 0.25);
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,.07);
            -webkit-border-radius: 30px;
            border-radius: 30px;
            color: #fff;
            padding: 0 10px 0 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            z-index: 1000;
            font-size: 0;
            -webkit-transition: all cubic-bezier(.4,0,.2,1) .4s;
            -o-transition: all cubic-bezier(.4,0,.2,1) .4s;
            transition: all cubic-bezier(.4,0,.2,1) .4s;
        }		
        .btn.purchase-theme svg{
            width:20px;
            fill:#fff;
            height:20px;
        }
        .btn.purchase-theme i.icon {
            height: 40px;
            width: 40px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            position: relative;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            background-color: #ff9800;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            margin: 10px 0 10px 10px;
            transition: all cubic-bezier(.4,0,.2,1) .4s;
        }
        .btn.purchase-theme i.icon:after {
            content: "";
            position: fixed;
            display: block;
            height: 60px;
            width: 60px;
            background: rgba(255, 152, 0, 0.3);
            z-index: -1;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -webkit-animation: 3s ease-in-out infinite pulse;
            animation: 3s ease-in-out infinite pulse;
        }	
        
        .btn.purchase-theme:hover {
            background-color: #ff9800;
            font-size: inherit;
            padding-right: 15px;
            border-color:#ff9800;
            -webkit-transition: all cubic-bezier(.4,0,.2,1) .4s;
                -o-transition: all cubic-bezier(.4,0,.2,1) .4s;
                transition: all cubic-bezier(.4,0,.2,1) .4s;
        }
        @-webkit-keyframes pulse{
            0%,100%,55%{
                -webkit-transform:scale(1);
                transform:scale(1);
                opacity:0
            }
            25%{
                -webkit-transform:scale(1.6);
                transform:scale(1.6);
                opacity:1
            }
        }
        @keyframes pulse{
            0%,100%,55%{
                -webkit-transform:scale(1);
                transform:scale(1);
                opacity:0
            }
            25%{
                -webkit-transform:scale(1.6);
                transform:scale(1.6);
                opacity:1
            }
        }
        
    </style>

<a target="_blank" class="purchase-theme btn" href="#">
        <i class="icon"><svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M4 16V4H2V2h3a1 1 0 0 1 1 1v12h12.438l2-8H8V5h13.72a1 1 0 0 1 .97 1.243l-2.5 10a1 1 0 0 1-.97.757H5a1 1 0 0 1-1-1zm2 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></g></svg></i>
        立即购买
    </a>

ICONSVG - 快速可自定义的SVG图标样式三:绿色

<style>
        .btn.chat-theme {
            position: fixed;
            bottom: 10px;
            left: 20px;
            margin-bottom: 60px;
            height: 60px;
            background: rgba(139, 195, 74, 0.25);
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,.07);
            -webkit-border-radius: 30px;
            border-radius: 30px;
            color: #fff;
            padding: 0 10px 0 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            z-index: 1000;
            font-size: 0;
            -webkit-transition: all cubic-bezier(.4,0,.2,1) .4s;
            -o-transition: all cubic-bezier(.4,0,.2,1) .4s;
            transition: all cubic-bezier(.4,0,.2,1) .4s;
        }		
        .btn.chat-theme svg{
            width:20px;
            fill:#fff;
            height:20px;
        }
        .btn.chat-theme i.icon {
            height: 40px;
            width: 40px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            position: relative;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            background-color: #8BC34A;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            margin: 10px 0 10px 10px;
            transition: all cubic-bezier(.4,0,.2,1) .4s;
        }
        .btn.chat-theme i.icon:after {
            content: "";
            position: fixed;
            display: block;
            height: 60px;
            width: 60px;
            background: rgba(139, 195, 74, 0.3);
            z-index: -1;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -webkit-animation: 3s ease-in-out infinite pulse;
            animation: 3s ease-in-out infinite pulse;
        }	
        
        .btn.chat-theme:hover {
            background-color: #8BC34A;
            font-size: inherit;
            padding-right: 15px;
            border-color:#8BC34A;
            -webkit-transition: all cubic-bezier(.4,0,.2,1) .4s;
                -o-transition: all cubic-bezier(.4,0,.2,1) .4s;
                transition: all cubic-bezier(.4,0,.2,1) .4s;
        }
        @-webkit-keyframes pulse{
            0%,100%,55%{
                -webkit-transform:scale(1);
                transform:scale(1);
                opacity:0
            }
            25%{
                -webkit-transform:scale(1.6);
                transform:scale(1.6);
                opacity:1
            }
        }
        @keyframes pulse{
            0%,100%,55%{
                -webkit-transform:scale(1);
                transform:scale(1);
                opacity:0
            }
            25%{
                -webkit-transform:scale(1.6);
                transform:scale(1.6);
                opacity:1
            }
        }
        
    </style>
<a target="_blank" class="chat-theme btn" href="https://1.envato.market/LQjWL">
        <i class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M22.7 11.92a5.7 5.7 0 0 1-.66 7.94c-.7.6-.94 1.1-.5 1.91.08.15.1.34.14.52-.7-.31-1.35-.78-2.04-.85-.69-.07-1.41.32-2.13.4a7.1 7.1 0 0 1-5.76-1.89c-3.07-2.84-2.63-7.2.92-9.52 3.16-2.07 7.8-1.38 10.02 1.49zm-7.41-7.03a6.65 6.65 0 0 1 1.38 3.52c-2.22.11-4.16.79-5.73 2.31a6.81 6.81 0 0 0-2.12 5.78c-.87-.11-1.66-.23-2.46-.3-.28-.02-.6.01-.84.14-.77.44-1.51.93-2.4 1.48.17-.73.27-1.37.46-1.98.13-.45.07-.7-.35-1C.56 12.95-.57 10.13.28 7.22c.78-2.7 2.7-4.33 5.3-5.18a8.89 8.89 0 0 1 9.7 2.85zm-1.63 7.97c-.47 0-.86.4-.84.86a.84.84 0 0 0 1.67 0 .84.84 0 0 0-.83-.86zm5.17 0c-.44 0-.81.35-.83.8-.02.47.35.85.82.85a.8.8 0 0 0 .82-.78.82.82 0 0 0-.81-.87zm-7.06-6.39c-.55.01-1.01.48-1 1.01a1 1 0 0 0 1.03.98c.56 0 1-.44.99-1a1 1 0 0 0-1.02-.99zm-6.34 0a1 1 0 0 0-1.04.97c-.01.56.42 1 .98 1.02.56.01 1.03-.42 1.05-.96a1.03 1.03 0 0 0-.99-1.03z"/></path></g></svg></i>
        微信联系
    </a>

ICONSVG - 快速可自定义的SVG图标样式四:粉色

<style>
        .btn.contact-theme {
            position: fixed;
            bottom: 10px;
            left: 20px;
            margin-bottom: 60px;
            height: 60px;
            background: rgba(255, 67, 100, 0.25);
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,.07);
            -webkit-border-radius: 30px;
            border-radius: 30px;
            color: #fff;
            padding: 0 10px 0 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            z-index: 1000;
            font-size: 0;
            -webkit-transition: all cubic-bezier(.4,0,.2,1) .4s;
            -o-transition: all cubic-bezier(.4,0,.2,1) .4s;
            transition: all cubic-bezier(.4,0,.2,1) .4s;
        }		
        .btn.contact-theme svg{
            width:20px;
            fill:#fff;
            height:20px;
        }
        .btn.contact-theme i.icon {
            height: 40px;
            width: 40px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            position: relative;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            background-color: #ff4364;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            margin: 10px 0 10px 10px;
            transition: all cubic-bezier(.4,0,.2,1) .4s;
        }
        .btn.contact-theme i.icon:after {
            content: "";
            position: fixed;
            display: block;
            height: 60px;
            width: 60px;
            background: rgba(255, 67, 100, 0.3);
            z-index: -1;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -webkit-animation: 3s ease-in-out infinite pulse;
            animation: 3s ease-in-out infinite pulse;
        }	
        
        .btn.contact-theme:hover {
            background-color: #ff4364;
            font-size: inherit;
            padding-right: 15px;
            border-color:#ff4364;
            -webkit-transition: all cubic-bezier(.4,0,.2,1) .4s;
                -o-transition: all cubic-bezier(.4,0,.2,1) .4s;
                transition: all cubic-bezier(.4,0,.2,1) .4s;
        }
        @-webkit-keyframes pulse{
            0%,100%,55%{
                -webkit-transform:scale(1);
                transform:scale(1);
                opacity:0
            }
            25%{
                -webkit-transform:scale(1.6);
                transform:scale(1.6);
                opacity:1
            }
        }
        @keyframes pulse{
            0%,100%,55%{
                -webkit-transform:scale(1);
                transform:scale(1);
                opacity:0
            }
            25%{
                -webkit-transform:scale(1.6);
                transform:scale(1.6);
                opacity:1
            }
        }
        
    </style>
<a target="_blank" class="contact-theme btn" href="https://1.envato.market/LQjWL">
        <i class="icon"><svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M4 16V4H2V2h3a1 1 0 0 1 1 1v12h12.438l2-8H8V5h13.72a1 1 0 0 1 .97 1.243l-2.5 10a1 1 0 0 1-.97.757H5a1 1 0 0 1-1-1zm2 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></g></svg></i>
        联系我们
    </a>

 

» 收起内容...



整点限时抢 - 精品中的极品,只为性价比而生