작은 sns 투명 아이콘 png

키워드 : 텀블,트위터,페이스북,구글플러스,밴드,카카오스토리 작은 sns png 아이콘

말자 작성일16-04-14 22:12 조회5,402회

본문

무료아이콘


말자닷컴 상단에 있는 sns 아이콘에 사용한 png파일이랍니다.

 

기존 둥근 sns아이콘은 이상해서 ㅠㅠ

기존 sns 아이콘에서 배경 빼고, 흰색의 sns로고만 적용된 png 아이콘이랍니다.

 

말자닷컴에 적용해둔 것은 css에서 각각의 백그라운드에 배경색 지정해서 적용한 것이랍니다.

실제 사용하실려면 컬러는 직접 적용시켜야 되겠죠?

 

말자닷컴과 비슷하게 사용하려면

아래와 비슷하게 (코드 분리해서 css 다시 짜봄...)

 

이미지 경로는 본인 호스팅계정이나 다른곳에 업로드해서 사용하세요 ㅎㅎ

 

<style>
#top_sns {margin:0; padding:0; list-style:none; }
#top_sns li{float:left; padding-top:5px}
#top_sns a img{border:0;}
#top_sns:after{content:''; clear:both; display:block;}
</style> 

 

 

 <ul id="top_sns">
 <li style="background-color:#4ecdf0;"><a href="" target="_blank"><img src="http://malza.com/img/sns/sns_twitter.png" alt="트위터"></a><li>
 <li style="background-color:#3d62b2;"><a href="" target="_blank"><img src="http://malza.com/img/sns/sns_face.png" alt="페이스북"></a><li>
 <li style="background-color:#2e325b;"><a href="" target="_blank"><img src="http://malza.com/img/sns/sns_pholar.png" alt="폴라"></a><li>
 <li style="background-color:#36465d;"><a href="" target="_blank"><img src="http://malza.com/img/sns/sns_tumblr.png" alt="텀블러"></a><li>
 <li style="background-color:#e24939;"><a href="" target="_blank"><img src="http://malza.com/img/sns/sns_google.png" alt="구글플러스"></a><li>
 <li style="background-color:#52535c;"><a href="" target="_blank"><img src="http://malza.com/img/sns/sns_band.png" alt="밴드"></a><li>
 <li style="background-color:#ffde00;"><a href="" target="_blank"><img src="http://malza.com/img/sns/sns_story.png" alt="카카오스토리"></a><li>
</ul>

 

 

배경색만 바꿔서 아래와 같이 사용할 수도 있고 ㅎㅎ

 

3c7b5da11344c94bfda0bf97cb029f25_1460663
 

25x24 크기의 sns로고만 적용된 png

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천하기 5

무료아이콘

408개의 게시물
목록
읽기: 1P (1lv), 쓰기: 200P (3lv), 덧글: 10P (2lv), 다운: -100P (2lv)
게시물 검색