SPSTRAP Document API

Social Icon

Preview icon - sm

With color

<div style="[color:#ff3300;]">
                                <i class="sp--icon" ico="facebook" scale="3xl"></i>
                                <i class="sp--icon" ico="kakao" scale="3xl"></i>
                                <i class="sp--icon" ico="kakaotalk" scale="3xl"></i>
                                <i class="sp--icon" ico="kakaostory" scale="3xl"></i>
                                <i class="sp--icon" ico="naver" scale="3xl"></i>
                                <i class="sp--icon" ico="line" scale="3xl"></i>
                                <i class="sp--icon" ico="google" scale="3xl"></i>
                                <i class="sp--icon" ico="apple" scale="3xl"></i>
                                <i class="sp--icon" ico="youtube" scale="3xl"></i>
                                <i class="sp--icon" ico="vimeo" scale="3xl"></i>
                                <i class="sp--icon" ico="instagram" scale="3xl"></i>
                            </div>

With color - circle

<div class="sp--btn-group">
                                <div class="sp--btn-gap" gap="md">
                                    <a href="#!" class="sp--btn sp--social" theme="circle-roundmax" scale="xs" social="facebook">
                                        <i class="sp--icon" ico="facebook"></i>
                                    </a>
                                    <a href="#!" class="sp--btn sp--social" theme="circle-roundmax" scale="sm" social="kakao">
                                        <i class="sp--icon" ico="kakao"></i>
                                    </a>
                                    <a href="#!" class="sp--btn sp--social" theme="circle-roundmax" scale="md" social="kakao">
                                        <i class="sp--icon" ico="kakaotalk"></i>
                                    </a>
                                    <a href="#!" class="sp--btn sp--social" theme="circle-roundmax" scale="lg" social="kakao">
                                        <i class="sp--icon" ico="kakaostory"></i>
                                    </a>
                                    <a href="#!" class="sp--btn sp--social" theme="circle-roundmax" scale="xl" social="naver">
                                        <i class="sp--icon" ico="naver"></i>
                                    </a>
                                    <a href="#!" class="sp--btn sp--social" theme="circle-roundmax" scale="2xl" social="line">
                                        <i class="sp--icon" ico="line"></i>
                                    </a>
                                    <a href="#!" class="sp--btn sp--social" theme="circle-roundmax" scale="3xl" social="google">
                                        <i class="sp--icon" ico="google"></i>
                                    </a>
                                    <a href="#!" class="sp--btn sp--social" theme="circle-roundmax" scale="3xl" social="apple">
                                        <i class="sp--icon" ico="apple"></i>
                                    </a>
                                    <a href="#!" class="sp--btn sp--social" theme="circle-roundmax" scale="3xl" social="youtube">
                                        <i class="sp--icon" ico="youtube"></i>
                                    </a>
                                    <a href="#!" class="sp--btn sp--social" theme="circle-roundmax" scale="3xl" social="vimeo">
                                        <i class="sp--icon" ico="vimeo"></i>
                                    </a>
                                    <a href="#!" class="sp--btn sp--social" theme="circle-roundmax" scale="3xl" social="instagram">
                                        <i class="sp--icon" ico="instagram"></i>
                                    </a>
                                </div>
                            </div>

With Button module 버튼 라이브러리

<a href="#!" [class="sp--btn" scale="md"]>
                                <span><i class="sp--icon" ico="vimeo"></i> 비메오</span>
                            </a>
                            <a href="#!" class="sp--btn" theme="box-white" scale="md">
                                <span><i class="sp--icon" ico="vimeo"></i> 비메오</span>
                            </a>
                            <a href="#!" class="sp--btn" theme="box-light" scale="md">
                                <span><i class="sp--icon" ico="vimeo"></i> 비메오</span>
                            </a>
                            <a href="#!" class="sp--btn" theme="box-gray" scale="md">
                                <span><i class="sp--icon" ico="vimeo"></i> 비메오</span>
                            </a>
                            <a href="#!" class="sp--btn" theme="box-dark" scale="md">
                                <span><i class="sp--icon" ico="vimeo"></i> 비메오</span>
                            </a>
                            
                            <a href="#!" class="sp--btn" theme="box-primary" scale="md">
                                <span><i class="sp--icon" ico="vimeo"></i> 비메오</span>
                            </a>
                            <a href="#!" class="sp--btn" theme="box-dark-roundmax" scale="md">
                                <span><i class="sp--icon" ico="vimeo"></i> 비메오</span>
                            </a>
                            <a href="#!" class="sp--btn" theme="border-dark" scale="md">
                                <span><i class="sp--icon" ico="vimeo"></i> 비메오</span>
                            </a>
                            <a href="#!" class="sp--btn" theme="fill-gray-left" scale="lg">
                                <span><i class="sp--icon" ico="vimeo"></i> 비메오</span>
                            </a>
                            <a href="#!" class="sp--btn" theme="fill-dark-left" scale="lg">
                                <span><i class="sp--icon" ico="vimeo"></i> 비메오</span>
                            </a>
                            <a href="#!" class="sp--btn" theme="fill-primary-left" scale="lg">
                                <span><i class="sp--icon" ico="vimeo"></i> 비메오</span>
                            </a>

With Button Group 버튼 라이브러리

<style>
                                /*
                                    소셜아이콘 + 버튼 조합을 담을 컨테이너
                                    크기를 지정하지 않으면 100% 형태로 표시된다.
                                */
                                .sample-container-block {
                                    [width: 250px;]
                                    margin: 0 auto;
                                }
                            </style>
                            <div class="[sample-container-block]">
                                <div class="[sp--btn-group]" fill="[block]">
                                    <div class="sp--btn-gap" gap="md">
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="facebook">
                                            <span><i class="sp--icon" ico="facebook"></i></span>
                                            <span float="right">페이스북 로그인</span>
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="kakao">
                                            <span><i class="sp--icon" ico="kakao"></i></span>
                                            <span float="right">카카오</span>
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="kakao">
                                            <span><i class="sp--icon" ico="kakaotalk"></i></span>
                                            <span float="right">카카오톡</span>
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="kakao">
                                            <span><i class="sp--icon" ico="kakaostory"></i></span>
                                            <span float="right">카카오 스토리</span>
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="naver">
                                            <span><i class="sp--icon" ico="naver"></i></span>
                                            <span float="right">네이버 로그인</span>
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="line">
                                            <span><i class="sp--icon" ico="line"></i></span>
                                            <span float="right">라인 로그인</span>
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="google">
                                            <span><i class="sp--icon" ico="google"></i></span>
                                            <span float="right">구글 로그인</span>
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="apple">
                                            <span><i class="sp--icon" ico="apple"></i></span>
                                            <span float="right">애플 로그인</span>
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="youtube">
                                            <span><i class="sp--icon" ico="youtube"></i></span>
                                            <span float="right">유튜브 로그인</span>
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="vimeo">
                                            <span><i class="sp--icon" ico="vimeo"></i></span>
                                            <span float="right">비메오 로그인</span>
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="instagram">
                                            <span><i class="sp--icon" ico="instagram"></i></span>
                                            <span float="right">인스타그램 로그인</span>
                                        </a>
                                    </div>
                                </div>
                            </div>

With Button Group 버튼 라이브러리

<style>
                                /*
                                    소셜아이콘 + 버튼 조합을 담을 컨테이너
                                    크기를 지정하지 않으면 100% 형태로 표시된다.
                                */
                                .sample-container-block {
                                    [width: 250px;]
                                    margin: 0 auto;
                                }
                            </style>
                            <div class="[sample-container-block]">
                                <div class="[sp--btn-group]" fill="[block]">
                                    <div class="sp--btn-gap" gap="md">
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="facebook">
                                            <i class="sp--icon" ico="facebook"></i>  페이스북 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="kakao">
                                            <i class="sp--icon" ico="kakao"></i>  카카오 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="kakao">
                                            <i class="sp--icon" ico="kakaotalk"></i>  카카오톡 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="kakao">
                                            <i class="sp--icon" ico="kakaostory"></i>  카카오스토리 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="naver">
                                            <i class="sp--icon" ico="naver"></i>  네이버 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="line">
                                            <i class="sp--icon" ico="line"></i>  라인 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="google">
                                            <i class="sp--icon" ico="google"></i>  구글 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="apple">
                                            <i class="sp--icon" ico="apple"></i>  애플 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="youtube">
                                            <i class="sp--icon" ico="youtube"></i>  유튜브 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="vimeo">
                                            <i class="sp--icon" ico="vimeo"></i>  비메오 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-round-both" scale="lg" social="instagram">
                                            <i class="sp--icon" ico="instagram"></i>  인스타그램 로그인
                                        </a>
                                    </div>
                                </div>
                            </div>

With Button Group ( 2 colume responsive ) 버튼 라이브러리

<style>
                                /*
                                    반응형 코드를 위한 기본 크기 지정
                                    이 크기는 gap 사이즈를 고려해야 한다.
                                    이 예제는 컨테이너가 600px이고, gap이 1px 이므로
                                    2개의 엘리먼트를 가지기 위해 298px을 min 사이즈로 설정한 예시이다.
                                */
                                .sample-conainer-col2 {
                                    [width: 600px;]
                                    margin: 0 auto;
                                }
                                .sample-conainer-col2 .sp--btn {
                                    [flex-basis: 298px;]
                                }
                            </style>
                            <div class="[sample-conainer-col2]">
                                <div class="[sp--btn-group]" fill="[full]">
                                    <div class="sp--btn-gap" gap="xs">
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="facebook">
                                            <i class="sp--icon" ico="facebook"></i>  페이스북 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="kakao">
                                            <i class="sp--icon" ico="kakao"></i>  카카오 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="kakao">
                                            <i class="sp--icon" ico="kakaotalk"></i>  카카오톡 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="kakao">
                                            <i class="sp--icon" ico="kakaostory"></i>  카카오스토리 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="naver">
                                            <i class="sp--icon" ico="naver"></i>  네이버 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="line">
                                            <i class="sp--icon" ico="line"></i>  라인 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="google">
                                            <i class="sp--icon" ico="google"></i>  구글 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="apple">
                                            <i class="sp--icon" ico="apple"></i>  애플 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="youtube">
                                            <i class="sp--icon" ico="youtube"></i>  유튜브 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="vimeo">
                                            <i class="sp--icon" ico="vimeo"></i>  비메오 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="instagram">
                                            <i class="sp--icon" ico="instagram"></i>  인스타그램 로그인
                                        </a>
                                    </div>
                                </div>
                            </div>

With Button Group ( 3 colume responsive ) 버튼 라이브러리

<style>
                                /*
                                    반응형 코드를 위한 기본 크기 지정
                                    이 크기는 gap 사이즈를 고려해야 한다.
                                    이 예제는 컨테이너가 600px이고, gap이 1px 이므로
                                    2개의 엘리먼트를 가지기 위해 298px을 min 사이즈로 설정한 예시이다.
                                */
                                .sample-conainer-col3 {
                                    [width: 600px;]
                                    margin: 0 auto;
                                }
                                .sample-conainer-col3 .sp--btn {
                                    [flex-basis: 198px;]
                                }
                            </style>
                            <div class="[sample-conainer-col3]">
                                <div class="[sp--btn-group]" fill="[full]">
                                    <div class="sp--btn-gap" gap="xs">
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="facebook">
                                            <i class="sp--icon" ico="facebook" scale="xl"></i>  페이스북 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="kakao">
                                            <i class="sp--icon" ico="kakao" scale="xl"></i>  카카오톡 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="kakao">
                                            <i class="sp--icon" ico="kakaotalk" scale="xl"></i>  카카오톡 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="kakao">
                                            <i class="sp--icon" ico="kakaostory" scale="xl"></i>  카카오톡 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="naver">
                                            <i class="sp--icon" ico="naver" scale="xl"></i>  네이버 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="line">
                                            <i class="sp--icon" ico="line" scale="xl"></i>  라인 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="google">
                                            <i class="sp--icon" ico="google" scale="xl"></i>  구글 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="apple">
                                            <i class="sp--icon" ico="apple" scale="xl"></i>  애플 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="youtube">
                                            <i class="sp--icon" ico="youtube" scale="xl"></i>  유튜브 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="vimeo">
                                            <i class="sp--icon" ico="vimeo" scale="xl"></i>  비메오 로그인
                                        </a>
                                        <a href="#!" class="sp--btn sp--social" theme="box-both" scale="lg" social="instagram">
                                            <i class="sp--icon" ico="instagram" scale="xl"></i>  인스타그램 로그인
                                        </a>
                                    </div>
                                </div>
                            </div>

Class

name	description
.sp--social	소셜 아이콘 컨테이너

Attribute

name	description

Etc

단일로는 사용을 할일이 별로 없다.
class="sp--btn" 속성과 함께 사용하는것이 좋겠다.