滑动继续阅读⇓
如何在网站上使用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等；
社媒品牌徽标，可选择图标大小，宽度，形状，棱角，颜色以及SVG，JSX，React等；
以下是代码颜色区分，可直接贴到页脚footer.php底部然后更改自己需要展示的图标即可：
样式一：蓝色
<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>
样式二：橙色
<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>
样式三：绿色
<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="#">
<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>
样式四：粉色
<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="#">
<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>
本文是否有帮助？
是否
