对齐Icomoon图标并获得正确的形状

时间：2018-04-23 05:32:23

标签： html css svg icons

努力让我的图标对齐并保持正确的形状。我试图在页脚中实现这一点，我可以在一个cikel中打印4个社交图标，并且页面上的其他地方有4个社交图标出现在行（flexbox）和square。但是，如果我将图标对齐为方形按钮，则圆圈会变成椭圆形。

有什么方法可以独立设计图标并确保它们具有响应性？

我只是把所有代码都放了一下，对不起。

.social-container {
    display: flex;
    /* flex-direction: row; */
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 0%;
    flex: 0;
}
.social-container a {

}
/* @mixin svg {
    position: relative;
    display: inline-flex;
    min-width: 0;
*/
a.svg, a.arrow {
    position: relative;
    display: inline-flex;
    min-width: 0;
}
a.arrow {
    text-decoration-line: none;
}
a.svg {
    /* display: inline-flex; */
    text-decoration-line: none;
    position: relative;
}


a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}

.social-container a svg {
    height: 3vh;
    margin-bottom: 10px;
}
.cirkel {
  background: #3b5998; 
  padding: 0.2em;
  display: inline-block;
  line-height: 0;
  -webkit-border-radius: 99%;
  -moz-border-radius: 99%;
  border-radius: 99%;
}

.cirkel:hover {
    background-color: brown;
}
.square {
    display: inline-flex;
    /* height: 25px;
    line-height: 30px; */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 5px;
   height: 30px;
   width: 80px;
   padding-top: 0.2em;
   padding-bottom: 0.2em;
   padding-right: 0.2em;
}
.square.fb-background {
    background: #3b5998;
}
.square.tw-background {
    background-color: #4da7de;
}
.square.pi-background {
    background-color: #b51205;
}
.square.gp-background {
    background-color: #dd4b39;
}

.flex-item {
    height: 5%;
}
.name{
  font-size: 0.5em;
  margin-left: 1em;
}

/* styling individual icons */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;

} 


/* obsolete styls */
.access-label {
text-decoration: none;
}


/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
  font-size: 32px;
  color: red;
}
========================================== */

.icon-home3 {
    color:blue;
}
.icon-arrow-left2 {
    width: 30px;
    min-height: 0vh;
}
.icon-arrow-left2:hover {
    background-color:#013e75;
    color: white;
}

.icon-facebook:before {
    content:'\e041';
}
/* .icon-facebook {
  color: #fff;
  font-size: 32px;
}  */

.icon-facebook {
    color: white;
    font-size: 20px;
   /* width: 20%; 
   height: 2%; */
   padding: 3px;
} 
.icon-facebook:hover {
    background-color: #2a4784;
}
.icon-google-plus:before {
    content:'\e042';
}
.icon-google-plus {

   /* width: 20%; * /
   height: 2%; */
   color: white;
   font-size: 20px;
}
.icon-google-plus:hover {
    background-color: #c93725;
}

.icon-linkedin2:before {
    content:'\e049';
}
.icon-linkedin2 {
    background-color: #3371b7;
    color: white;
   /* width: 20%; */
   height: 2%;
}
.icon-linkedin2:hover {
    background-color: #1f5da3;
}
.icon-pinterest2:before {
    content:'\e043';
}
.icon-pinterest2 {
    color: white;
   /* width: 20%; */
   padding: 3px;
   height: 2%;
   font-size: 20px;
}
.icon-pinterest:hover {

}

.icon-price-tag {
    width: 20px;
    height: 25px;
    display: inline;
    padding-top: 5px;
}

/* same styling icons used in text heading tag <H4> */
.icon-price-tags, .icon-camera, .icon-bubbles {
    color: white;
}
.icon-sailing-boat-water {
    color: blueviolet;
}
.icon-price-tags, .icon-camera, .icon-bubbles {
    height: 25px;
    display: inline;
    padding-top: 4px;
    width: 30px;
    min-height: 0vh;
}
.icon-rss:before {
    content:'\e00b';
}
.icon-rss {
   /* width: 20%; */
   height: 2%;
   padding: 3px;
    background-color: #f26109;
    color: white;
}
.icon-rss:hover {
    background-color: #de4d00;
}
.icon-search {
    color: #ccc;
}
.icon-search:hover {
    color: blueviolet;
}
.icon-twitter:before {
    content:'\e040';
}

.icon-twitter {

    color: white;
    /* width: 20%; */
    height: 2%;
    padding: 3px;
   font-size: 20px;
}
.icon-twitter:hover {
    background-color: #3993ca;
}
<!doctype html>
    <html>
    <head>
    	<title>IcoMoon - SVG Icons</title>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="demo-files/demo.css">
    	<link rel="stylesheet" href="demo-files/probeersel.css">
    <!-- link rel="stylesheet" href="SVG/cssfolder-SVG_SPRITE/iconizr-svg-sprite.css" -->
    <!-- link rel="stylesheet" href="style.css" -->
    </head>
    <body>
    <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-sailing-boat-water" viewbox="0 0 32 32"> 
    <title>sailing-boat-water</title>
    <path d="M21.671 23h0.329c2.209 0 3.999-1.795 3.999-4h-10v-15h-1v15h-10c0 0.876 0.282 1.686 0.759 2.345 3.661-1.772 7.586-1.975 11.486 0.219 1.515 0.852 2.993 1.312 4.426 1.436v0 0zM26 18h-9v-9l9 9zM8 9.5c-3 5-3 8.5-3 8.5h9c0 0-1-1.5-1-6s1-8 1-8c0 0-3 0.5-6 5.5v0zM3 25c0.432-0.319 0.901-0.634 1.405-0.934 4.032-2.406 8.441-2.965 12.82-0.502 4.021 2.262 7.786 1.761 11.12-0.452 0.623-0.414 1.177-0.857 1.655-1.299v1.322c-0.341 0.277-0.709 0.549-1.102 0.81-3.622 2.405-7.778 2.957-12.164 0.491-4.022-2.262-8.065-1.75-11.817 0.489-0.713 0.425-1.353 0.881-1.911 1.336-0.002 0.002-0.004 0.003-0.006 0.005v-1.266zM5.979 26.232c3.592-1.665 7.43-1.813 11.245 0.333 3.481 1.958 6.771 1.846 9.755 0.344v1.109c-3.143 1.433-6.616 1.46-10.245-0.581-3.645-2.050-7.307-1.822-10.755-0.094v-1.11z"></path> </symbol> <symbol id="icon-home3" viewbox="0 0 32 32"> 
    <title>home3</title>
    <path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z"></path> </symbol> <symbol id="icon-camera" viewbox="0 0 32 32"> 
    <title>camera</title>
    <path d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"></path> </symbol> <symbol id="icon-file-text" viewbox="0 0 32 32"> 
    <title>file-text</title>
    <path d="M27 0h-24c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h24c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM26 28h-22v-24h22v24zM8 14h14v2h-14zM8 18h14v2h-14zM8 22h14v2h-14zM8 10h14v2h-14z"></path> </symbol> <symbol id="icon-profile" viewbox="0 0 32 32"> 
    <title>profile</title>
    <path d="M27 0h-24c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h24c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM26 28h-22v-24h22v24zM8 18h14v2h-14zM8 22h14v2h-14zM10 9c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3s-3-1.343-3-3zM15 12h-4c-1.65 0-3 0.9-3 2v2h10v-2c0-1.1-1.35-2-3-2z"></path> </symbol> <symbol id="icon-price-tag" viewbox="0 0 32 32"> 
    <title>price-tag</title>
    <path d="M30.5 0h-12c-0.825 0-1.977 0.477-2.561 1.061l-14.879 14.879c-0.583 0.583-0.583 1.538 0 2.121l12.879 12.879c0.583 0.583 1.538 0.583 2.121 0l14.879-14.879c0.583-0.583 1.061-1.736 1.061-2.561v-12c0-0.825-0.675-1.5-1.5-1.5zM23 12c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"></path> </symbol> <symbol id="icon-price-tags" viewbox="0 0 40 32"> 
    <title>price-tags</title>
    <path d="M38.5 0h-12c-0.825 0-1.977 0.477-2.561 1.061l-14.879 14.879c-0.583 0.583-0.583 1.538 0 2.121l12.879 12.879c0.583 0.583 1.538 0.583 2.121 0l14.879-14.879c0.583-0.583 1.061-1.736 1.061-2.561v-12c0-0.825-0.675-1.5-1.5-1.5zM31 12c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"></path> <path d="M4 17l17-17h-2.5c-0.825 0-1.977 0.477-2.561 1.061l-14.879 14.879c-0.583 0.583-0.583 1.538 0 2.121l12.879 12.879c0.583 0.583 1.538 0.583 2.121 0l0.939-0.939-13-13z"></path> </symbol> <symbol id="icon-bubbles" viewbox="0 0 36 32"> 
    <title>bubbles</title>
    <path d="M34 28.161c0 1.422 0.813 2.653 2 3.256v0.498c-0.332 0.045-0.671 0.070-1.016 0.070-2.125 0-4.042-0.892-5.398-2.321-0.819 0.218-1.688 0.336-2.587 0.336-4.971 0-9-3.582-9-8s4.029-8 9-8c4.971 0 9 3.582 9 8 0 1.73-0.618 3.331-1.667 4.64-0.213 0.463-0.333 0.979-0.333 1.522zM16 0c8.702 0 15.781 5.644 15.995 12.672-1.537-0.685-3.237-1.047-4.995-1.047-2.986 0-5.807 1.045-7.942 2.943-2.214 1.968-3.433 4.607-3.433 7.432 0 1.396 0.298 2.747 0.867 3.993-0.163 0.004-0.327 0.007-0.492 0.007-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z"></path> </symbol> <symbol id="icon-spinner3" viewbox="0 0 32 32"> 
    <title>spinner3</title>
    <path d="M16 9.472c-1.030 0-1.865-0.835-1.865-1.865v-5.596c0-1.030 0.835-1.865 1.865-1.865s1.865 0.835 1.865 1.865v5.596c0 1.030-0.835 1.865-1.865 1.865z"></path> <path d="M16 31.155c-0.644 0-1.166-0.522-1.166-1.166v-5.596c0-0.644 0.522-1.166 1.166-1.166s1.166 0.522 1.166 1.166v5.596c0 0.644-0.522 1.166-1.166 1.166z"></path> <path d="M11.805 10.48c-0.604 0-1.192-0.314-1.516-0.875l-2.798-4.846c-0.483-0.836-0.196-1.906 0.64-2.389s1.906-0.196 2.389 0.64l2.798 4.846c0.483 0.836 0.196 1.906-0.64 2.389-0.275 0.159-0.576 0.235-0.873 0.235z"></path> <path d="M22.995 29.164c-0.363 0-0.715-0.188-0.91-0.525l-2.798-4.846c-0.29-0.502-0.118-1.143 0.384-1.433s1.143-0.118 1.433 0.384l2.798 4.846c0.29 0.502 0.118 1.143-0.384 1.433-0.165 0.095-0.346 0.141-0.524 0.141z"></path> <path d="M8.729 13.436c-0.277 0-0.557-0.070-0.814-0.219l-4.846-2.798c-0.781-0.451-1.048-1.449-0.597-2.229s1.449-1.048 2.229-0.597l4.846 2.798c0.781 0.451 1.048 1.449 0.597 2.229-0.302 0.524-0.851 0.816-1.415 0.816z"></path> <path d="M28.114 23.927c-0.158 0-0.319-0.040-0.465-0.125l-4.846-2.798c-0.446-0.258-0.599-0.828-0.341-1.274s0.828-0.599 1.274-0.341l4.846 2.798c0.446 0.258 0.599 0.828 0.341 1.274-0.173 0.299-0.486 0.466-0.809 0.466z"></path> <path d="M7.607 17.515h-5.596c-0.837 0-1.516-0.678-1.516-1.515s0.678-1.515 1.516-1.515h5.596c0.837 0 1.516 0.678 1.516 1.515s-0.678 1.515-1.516 1.515z"></path> <path d="M29.989 16.933c-0 0 0 0 0 0h-5.596c-0.515-0-0.933-0.418-0.933-0.933s0.418-0.933 0.933-0.933c0 0 0 0 0 0h5.596c0.515 0 0.933 0.418 0.933 0.933s-0.418 0.933-0.933 0.933z"></path> <path d="M3.886 24.394c-0.483 0-0.954-0.251-1.213-0.7-0.386-0.669-0.157-1.525 0.512-1.911l4.846-2.798c0.669-0.387 1.525-0.157 1.911 0.512s0.157 1.525-0.512 1.911l-4.846 2.798c-0.22 0.127-0.461 0.188-0.698 0.188z"></path> <path d="M23.27 12.736c-0.322 0-0.636-0.167-0.809-0.466-0.258-0.446-0.105-1.016 0.341-1.274l4.846-2.798c0.446-0.257 1.016-0.105 1.274 0.341s0.105 1.016-0.341 1.274l-4.846 2.798c-0.147 0.085-0.307 0.125-0.465 0.125z"></path> <path d="M9.004 29.397c-0.218 0-0.438-0.055-0.64-0.172-0.613-0.354-0.823-1.138-0.469-1.752l2.798-4.846c0.354-0.613 1.138-0.823 1.752-0.469s0.823 1.138 0.469 1.752l-2.798 4.846c-0.237 0.411-0.668 0.641-1.112 0.641z"></path> <path d="M20.196 9.664c-0.158 0-0.319-0.040-0.465-0.125-0.446-0.258-0.599-0.828-0.341-1.274l2.798-4.846c0.258-0.446 0.828-0.599 1.274-0.341s0.599 0.828 0.341 1.274l-2.798 4.846c-0.173 0.299-0.486 0.466-0.809 0.466z"></path> </symbol> <symbol id="icon-search" viewbox="0 0 32 32"> 
    <title>search</title>
    <path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path> </symbol> <symbol id="icon-arrow-up2" viewbox="0 0 32 32"> 
    <title>arrow-up2</title>
    <path d="M27.414 12.586l-10-10c-0.781-0.781-2.047-0.781-2.828 0l-10 10c-0.781 0.781-0.781 2.047 0 2.828s2.047 0.781 2.828 0l6.586-6.586v19.172c0 1.105 0.895 2 2 2s2-0.895 2-2v-19.172l6.586 6.586c0.39 0.39 0.902 0.586 1.414 0.586s1.024-0.195 1.414-0.586c0.781-0.781 0.781-2.047 0-2.828z"></path> </symbol> <symbol id="icon-arrow-right2" viewbox="0 0 32 32"> 
    <title>arrow-right2</title>
    <path d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0s-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h19.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z"></path> </symbol> <symbol id="icon-arrow-left2" viewbox="0 0 32 32"> 
    <title>arrow-left2</title>
    <path d="M12.586 27.414l-10-10c-0.781-0.781-0.781-2.047 0-2.828l10-10c0.781-0.781 2.047-0.781 2.828 0s0.781 2.047 0 2.828l-6.586 6.586h19.172c1.105 0 2 0.895 2 2s-0.895 2-2 2h-19.172l6.586 6.586c0.39 0.39 0.586 0.902 0.586 1.414s-0.195 1.024-0.586 1.414c-0.781 0.781-2.047 0.781-2.828 0z"></path> </symbol> <symbol id="icon-google-plus" viewbox="0 0 32 32"> 
    <title>google-plus</title>
    <path d="M10.181 14.294v3.494h5.775c-0.231 1.5-1.744 4.394-5.775 4.394-3.475 0-6.313-2.881-6.313-6.431s2.838-6.431 6.313-6.431c1.981 0 3.3 0.844 4.056 1.569l2.762-2.662c-1.775-1.656-4.075-2.662-6.819-2.662-5.631 0.006-10.181 4.556-10.181 10.188s4.55 10.181 10.181 10.181c5.875 0 9.775-4.131 9.775-9.95 0-0.669-0.075-1.181-0.163-1.688h-9.613z"></path> <path d="M32 14h-3v-3h-3v3h-3v3h3v3h3v-3h3z"></path> </symbol> <symbol id="icon-facebook" viewbox="0 0 32 32"> 
    <title>facebook</title>
    <path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path> </symbol> <symbol id="icon-twitter" viewbox="0 0 32 32"> 
    <title>twitter</title>
    <path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path> </symbol> <symbol id="icon-rss" viewbox="0 0 32 32"> 
    <title>rss</title>
    <path d="M4.259 23.467c-2.35 0-4.259 1.917-4.259 4.252 0 2.349 1.909 4.244 4.259 4.244 2.358 0 4.265-1.895 4.265-4.244-0-2.336-1.907-4.252-4.265-4.252zM0.005 10.873v6.133c3.993 0 7.749 1.562 10.577 4.391 2.825 2.822 4.384 6.595 4.384 10.603h6.16c-0-11.651-9.478-21.127-21.121-21.127zM0.012 0v6.136c14.243 0 25.836 11.604 25.836 25.864h6.152c0-17.64-14.352-32-31.988-32z"></path> </symbol> <symbol id="icon-linkedin2" viewbox="0 0 32 32"> 
    <title>linkedin2</title>
    <path d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path> <path d="M2 12h6v18h-6v-18z"></path> <path d="M8 7c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"></path> </symbol> <symbol id="icon-pinterest2" viewbox="0 0 32 32"> 
    <title>pinterest2</title>
    <path d="M16 0c-8.825 0-16 7.175-16 16s7.175 16 16 16 16-7.175 16-16-7.175-16-16-16zM16 29.863c-1.431 0-2.806-0.219-4.106-0.619 0.563-0.919 1.412-2.431 1.725-3.631 0.169-0.65 0.863-3.294 0.863-3.294 0.45 0.863 1.775 1.594 3.175 1.594 4.181 0 7.194-3.844 7.194-8.625 0-4.581-3.738-8.006-8.544-8.006-5.981 0-9.156 4.019-9.156 8.387 0 2.031 1.081 4.563 2.813 5.369 0.262 0.125 0.4 0.069 0.463-0.188 0.044-0.194 0.281-1.131 0.387-1.575 0.031-0.137 0.019-0.262-0.094-0.4-0.575-0.694-1.031-1.975-1.031-3.162 0-3.056 2.313-6.019 6.256-6.019 3.406 0 5.788 2.319 5.788 5.637 0 3.75-1.894 6.35-4.356 6.35-1.363 0-2.381-1.125-2.050-2.506 0.394-1.65 1.15-3.425 1.15-4.613 0-1.063-0.569-1.95-1.756-1.95-1.394 0-2.506 1.438-2.506 3.369 0 1.225 0.412 2.056 0.412 2.056s-1.375 5.806-1.625 6.887c-0.281 1.2-0.169 2.881-0.050 3.975-5.156-2.012-8.813-7.025-8.813-12.9 0-7.656 6.206-13.863 13.862-13.863s13.863 6.206 13.863 13.863c0 7.656-6.206 13.863-13.863 13.863z"></path> </symbol> </defs> </svg> 
    <header class="bgc1 clearfix">
    	<div class="mhl">
    		<p>
    			SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a>
    		</p>
    	</div>
    </header>
    <a href="https://website-url" title="Latest News"> <svg class="icon icon-sailing-boat-water" aria-hidden="true" focusable="false"> <use xlink:href="#icon-sailing-boat-water"></use> </svg> </a> <br />
    <br />
    <span class="cirkel"><svg preserveaspectratio="none" class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg></span> <br />
    <br />
    <a href="http://www.facebook.com/sharer.php?u={$canonical}" target="_blank" class="svg"> <span class="cirkel"><svg preserveaspectratio="none" class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg></span> </a> <br />
    <br />
    <span class="social-container" style="width: 400px;"> <a href="http://www.facebook.com/sharer.php?u={$canonical}" target="_blank" class="svg"> <span class="square fb-background"><svg preserveaspectratio="none" class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg></span> </a> <a href="https://twitter.com/share?url={canonical}&amp;text={title}&amp;hashtags=$hashtags" target="popup" onclick="window.open('https://www.twitter.com','name','width=600,height=400')" class="svg"> <span class="square tw-background"><svg preserveaspectratio="none" class="icon icon-twitter"><use xlink:href="#icon-twitter"></use></svg></span> </a> <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());" class="svg"> <span class="square pi-background"><svg preserveaspectratio="none" class="icon icon-pinterest2"><use xlink:href="#icon-pinterest2"></use></svg></span> </a> <a href="https://plus.google.com/share?url={$canonical}" target="_blank" class="svg"> <span class="square gp-background"><svg preserveaspectratio="none" class="icon icon-google-plus"><use xlink:href="#icon-google-plus"></use></svg></span> </a> 
    </span> 
    <p>
    </body>
    </html>

0 个答案:

没有答案
相关问题
最新问题