html 社交icos svg html

Posted 2021-05-11

<div class="socials">
		    		<span class="top-btn">top</span>		
		      <a class="facebook" href="https://www.facebook.com/nolongerempty" target="_blank">
		        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="9.74px" height="19.292px" viewBox="-1.629 -2.199 9.74 19.292" enable-background="new -1.629 -2.199 9.74 19.292" xml:space="preserve">
		          <path d="M1.248,2.336v2.527h-2.877v3.432h2.877v8.798h3.446V8.295h2.862l0.441-3.432H4.697V2.668c0-0.983,0.258-1.665,1.646-1.665
		            h1.769v-3.062c-0.305-0.044-1.353-0.14-2.572-0.14C2.992-2.199,1.248-0.598,1.248,2.336"></path>
		        </svg>
		      </a>
		      <a class="twitter" href="https://twitter.com/NoLongerEmpty" target="_blank">
		        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="19.925px" height="15.92px" viewBox="0.976 0.488 19.925 15.92" enable-background="new 0.976 0.488 19.925 15.92" xml:space="preserve">
		          <path d="M10.688,4.507c0,0.309,0.034,0.618,0.102,0.915C7.398,5.249,4.38,3.656,2.369,1.219C2.014,1.818,1.81,2.501,1.81,3.248
		            c0,1.394,0.728,2.625,1.821,3.348C2.965,6.569,2.33,6.38,1.783,6.08v0.052c0,1.954,1.405,3.572,3.275,3.944
		            c-0.34,0.088-0.705,0.14-1.076,0.14c-0.262,0-0.518-0.026-0.766-0.066c0.515,1.591,2.02,2.749,3.815,2.788
		            c-1.401,1.083-3.163,1.718-5.071,1.718c-0.341,0-0.656-0.017-0.985-0.053c1.812,1.145,3.957,1.805,6.271,1.805
		            c7.508,0,11.617-6.122,11.617-11.432c0-0.173,0-0.346-0.014-0.521h0.003c0.795-0.573,1.491-1.278,2.047-2.079
		            c-0.733,0.314-1.531,0.539-2.355,0.624c0.852-0.498,1.497-1.283,1.8-2.215c-0.788,0.458-1.672,0.794-2.592,0.972
		            c-0.742-0.782-1.807-1.269-2.984-1.269C12.51,0.489,10.688,2.29,10.688,4.507"></path>
		        </svg>
		      </a>
		      <!--
		      <a class="youtube" href="#">
		        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		          width="20px" height="15.166px" viewBox="0 0 20 15.166" enable-background="new 0 0 20 15.166" xml:space="preserve">
		          <path d="M19.789,3.271c0,0-0.201-1.474-0.787-2.135c-0.76-0.861-1.621-0.861-1.995-0.896C14.203,0.028,10,0,10,0
		            S5.797,0.028,2.993,0.239C2.619,0.274,1.758,0.312,0.998,1.136C0.375,1.797,0.211,3.271,0.211,3.271S0,5.028,0,6.797v1.61
		            c0,1.759,0.211,3.488,0.211,3.488s0.201,1.484,0.787,2.135c0.76,0.861,1.759,0.834,2.207,0.934C4.789,15.138,10,15.166,10,15.166
		            s4.203,0,7.007-0.239c0.374-0.035,1.235-0.062,1.995-0.896c0.586-0.65,0.787-2.135,0.787-2.135S20,10.138,20,8.407v-1.61
		            C20,5.028,19.789,3.271,19.789,3.271z M7.593,11.325V3.841l6.546,3.828L7.593,11.325z"/>
		        </svg>
		      </a>
		       -->
		      <a class="instagram" href="https://www.instagram.com/nolongerempty/" target="_blank">
						<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-3 -3 26 26" xml:space="preserve">
						<g>
							<path d="M10,15c-2.8,0-5-2.3-5-5s2.3-5,5-5c2.8,0,5,2.3,5,5S12.8,15,10,15z M10,6.5c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5
								s3.5-1.6,3.5-3.5S11.9,6.5,10,6.5z"></path>
							<path d="M15.5,6.2c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3s1.3,0.6,1.3,1.3S16.2,6.2,15.5,6.2z M15.5,4.8
								C15.5,4.8,15.5,4.8,15.5,4.8C15.5,4.9,15.5,4.9,15.5,4.8C15.5,4.8,15.5,4.8,15.5,4.8z"></path>
							<path d="M14.9,20H5.1C2.3,20,0,17.7,0,14.9V5.1C0,2.3,2.3,0,5.1,0h9.9C17.7,0,20,2.3,20,5.1v9.9C20,17.7,17.7,20,14.9,20z M5.1,1.6
								c-1.9,0-3.5,1.6-3.5,3.5v9.9c0,1.9,1.6,3.5,3.5,3.5h9.9c1.9,0,3.5-1.6,3.5-3.5V5.1c0-1.9-1.6-3.5-3.5-3.5H5.1z"></path>
						</g>
						</svg>
		      	
		      </a>
		      <a class="vimeo" href="https://vimeo.com/nolongerempty" target="_blank">
						<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-2 -2 24 21.3" xml:space="preserve">
						<g>
							<path id="Vimeo" d="M17.1,0c-2.8-0.1-4.7,1.5-5.6,4.7c0.5-0.2,1-0.3,1.5-0.3c1,0,1.5,0.6,1.3,1.7c-0.1,0.7-0.5,1.7-1.3,3
								c-0.8,1.3-1.5,2-1.9,2c-0.5,0-1-1-1.5-3.1C9.4,7.4,9.1,5.9,8.7,3.4C8.4,1.1,7.4,0.1,5.9,0.2C5.2,0.3,4.2,0.9,2.9,2
								C2,2.9,1,3.8,0,4.6l0.9,1.2c0.9-0.6,1.4-0.9,1.6-0.9c0.7,0,1.3,1.1,1.9,3.2c0.5,2,1.1,4,1.6,5.9c0.8,2.2,1.8,3.2,3,3.2
								c1.9,0,4.2-1.8,6.9-5.3c2.6-3.4,4-6.1,4.1-8C20.1,1.4,19.1,0.1,17.1,0z"></path>
						</g>
						</svg>
		      </a>
	
	                <a href="#" class="linkedin">
  
                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                   viewBox="0 0 16 16.2" width="16" height="16.161" style="enable-background:new 0 0 16 16.2;" xml:space="preserve">
                <path d="M8.6,7.3L8.6,7.3L8.6,7.3L8.6,7.3z"/>
                <path d="M14.8,0H1.2C0.5,0,0,0.5,0,1.2l0,0V15c0,0.6,0.5,1.2,1.2,1.2l0,0h13.7c0.6,0,1.2-0.5,1.2-1.2l0,0V1.2C16,0.5,15.5,0,14.8,0
                  L14.8,0z M4.8,13.5H2.4V6.2h2.4V13.5z M3.6,5.2L3.6,5.2c-0.7,0-1.2-0.6-1.2-1.4c0-0.7,0.6-1.2,1.4-1.2C4.5,2.7,5,3.3,5,3.9
                  c0,0.7-0.5,1.2-1.2,1.3C3.7,5.2,3.7,5.2,3.6,5.2L3.6,5.2z M13.6,13.5h-2.4V9.6c0-1-0.4-1.7-1.2-1.7c-0.6,0-1,0.4-1.2,0.9
                  c0,0.2-0.1,0.4-0.1,0.6v4.1H6.2c0,0,0-6.6,0-7.3h2.4v1C9.1,6.5,9.9,6,10.8,6c1.6,0,2.8,1,2.8,3.3L13.6,13.5z"/>
                </svg>

                </a>
		    </div>