Social Icons : 스프라이트하려면?

Question

나는 현재 HTML/CSS 템플릿에서 일하고 있어요, 나는 다음과 같은 소셜 미디어 아이콘을 구현하는거야 :

http://www.premiumpixels.com/freebies/41-social-media-icons-png/

그들은 41 개 별도의 .PNG 파일로 제공됩니다. 그래서 같은 쉬운 사용을 위해, CSS 클래스를 사용하여 내 템플릿에 그들을 포함 할 :

<i class="icon-twitter"></i> 
<i class="icon-facebook"></i> 

이제 질문은, 내 CSS 클래스에 별도의 파일로 각 아이콘을 참조해야합니다, 또는 나는 모든 통합한다 41 개의 아이콘을 하나의 스프라이트에 집어 넣고 각 클래스의 배경 위치를 조정하십시오 (CSS 스프라이트 기술)?

내 테마를 사용하는 아무도 자신의 웹 사이트 (희망 사항)에 41 개의 소셜 미디어 아이콘을 사용하지 않을 것입니다. 평균 사이트에서 한 번에 약 3 ~ 4 개의 아이콘이 사용됩니다. 그래서 이것으로 인해서 sprites 기술을 사용하는 것이 전혀 의미가 있는지 궁금하게 생각합니다. 단지 1/10 (4/4) 정도만 사용하면됩니다.

단일 파일의 파일 크기는 평균 파일 당 약 2kb입니다. 작성한 스프라이트 크기는 42kb입니다.

이 시나리오에 가장 적합한 솔루션은 무엇입니까?

또한 : 스프라이트의 아이콘이 배포되는 방식이 중요합니까? 방금 2 열과 21 행의 아이콘을 만들었습니다. 하나의 열과 41 개의 행 또는 6 개의 열과 7 개의 행이있을 수도 있습니다.

건배

Answer 1

모든 것을 스프라이트에 넣어야합니다. 정말 쉽게 할 수 있도록하는 발전기가 있습니다.

스프라이트로 결합하면 HTTP 요청 수를 줄일 수 있습니다. 당신이 내가 사용자를위한 두 가지 옵션을 provding 좋을 것 구축하고 템플릿이기 때문에

http://spritegen.website-performance.org/

Answer 2

일반 스프라이트 컨테이너에 대해 하나의 클래스를 만듭니다.

스프라이트 위치 지정을위한 개별 클래스를 만듭니다. 그들이 어떻게 배치되는지는 별 문제가되지 않습니다. 아이디어는 HTTP 요청을 줄이는 것입니다.

Answer 3

.

그들은 등 페이스 북, 트위터, 유튜브

그리고 아이콘을 모두 포함하는 다른 스프라이트로 가장 인기있는 아이콘을 포함하는 하나 개의 스프라이트를 사용할 수 있습니다.

그런 다음 템플릿 사용자가 템플릿에 사용할 스프라이트를 선택하게하십시오.

"가장 인기있는 아이콘"을 스프라이트의 맨 위쪽과 같은 레이아웃에 포함 시키면 전체 스프라이트의 대부분이 포함 된 CSS를 사용할 수 있습니다.

기본 원칙은 가능한 한 적은 수의 HTTP 요청을 갖는 것이므로이 방법을 사용하면 하나의 HTTP 요청을 목표로하지만 파일 크기는 작아지고 선택 사항은 더 커질 수 있습니다.