SNSアイコンのHTML・CSSテンプレ(Instagram・Facebook・Twitter・LINE)

HTML


<ul class="pattern-01">
    <li>
        <a href="#" class="icon-wrap icon-wrap-facebook">
            <i class="fab fa-facebook fa-3x"></i>
        </a>
    </li>
    <li>
        <a href="#" class="icon-wrap icon-wrap-twitter">
            <i class="fab fa-twitter fa-3x"></i>
        </a>
    </li>
    <li>
        <a href="#" class="icon-wrap icon-wrap-line">
            <i class="fab fa-line fa-3x"></i>
        </a>
    </li>
</ul>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

CSS


/*
    アイコンの色が変わる
*/
.pattern-01 .icon-wrap {
    display: block;
    color: black;
}

.pattern-01 .icon-wrap:hover.icon-wrap-facebook {
    color: #1877f2;
}

.pattern-01 .icon-wrap:hover.icon-wrap-twitter {
    color: #1da1f2;
}

.pattern-01 .icon-wrap:hover.icon-wrap-line {
    color: #00B900;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

/*

アイコンの色が変わる

*/

.pattern-01 .icon-wrap {

display: block;

color: black;

}

.pattern-01 .icon-wrap:hover.icon-wrap-facebook {

color: #1877f2;

}

.pattern-01 .icon-wrap:hover.icon-wrap-twitter {

color: #1da1f2;

}

.pattern-01 .icon-wrap:hover.icon-wrap-line {

color: #00B900;

}

HTML


<!-- 背景を正方形で白抜き -->
<ul class="pattern-02 square">
    <li>
        <a href="#" class="icon-wrap icon-wrap-facebook">
            <i class="fab fa-facebook fa-3x"></i>
        </a>
    </li>
    <li>
        <a href="#" class="icon-wrap icon-wrap-twitter">
            <i class="fab fa-twitter fa-3x"></i>
        </a>
    </li>
    <li>
        <a href="#" class="icon-wrap icon-wrap-line">
            <i class="fab fa-line fa-3x"></i>
        </a>
    </li>
</ul>

<!-- 背景を円で白抜き -->
<ul class="pattern-02 circle">
    <li>
        <a href="#" class="icon-wrap icon-wrap-facebook">
            <i class="fab fa-facebook fa-3x"></i>
        </a>
    </li>
    <li>
        <a href="#" class="icon-wrap icon-wrap-twitter">
            <i class="fab fa-twitter fa-3x"></i>
        </a>
    </li>
    <li>
        <a href="#" class="icon-wrap icon-wrap-line">
            <i class="fab fa-line fa-3x"></i>
        </a>
    </li>
</ul>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

CSS


/*
    アイコンの色が変わる(背景を白抜き)
*/
.pattern-02 .icon-wrap {
    display: block;
    color: black;
}

.pattern-02 .icon-wrap.icon-wrap-facebook,
.pattern-02 .icon-wrap.icon-wrap-twitter {
    /* facebookとTwitterのアイコンは正方形なので、上下左右のpaddingの値は同じ */
    padding: 7px;
}

.pattern-02 .icon-wrap.icon-wrap-line {
    /* LINEのアイコンは縦に長い(= 正方形ではない)ので左右のpaddingを少し多めにとる */
    padding: 7px 10px;
}

.pattern-02 .icon-wrap:hover {
    background-color: white;
}

.pattern-02.square .icon-wrap:hover {
    border-radius: 25%; /* 正方形 */
}
.pattern-02.circle .icon-wrap:hover {
    border-radius: 50%; /* 円 */
}

.pattern-02 .icon-wrap:hover.icon-wrap-facebook {
    color: #1877f2;
}

.pattern-02 .icon-wrap:hover.icon-wrap-twitter {
    color: #1da1f2;
}

.pattern-02 .icon-wrap:hover.icon-wrap-line {
    color: #00B900;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

/*

アイコンの色が変わる(背景を白抜き)

*/

.pattern-02 .icon-wrap {

display: block;

color: black;

}

.pattern-02 .icon-wrap.icon-wrap-facebook,

.pattern-02 .icon-wrap.icon-wrap-twitter {

/* facebookとTwitterのアイコンは正方形なので、上下左右のpaddingの値は同じ */

padding: 7px;

}

.pattern-02 .icon-wrap.icon-wrap-line {

/* LINEのアイコンは縦に長い(= 正方形ではない)ので左右のpaddingを少し多めにとる */

padding: 7px 10px;

}

.pattern-02 .icon-wrap:hover {

background-color: white;

}

.pattern-02.square .icon-wrap:hover {

border-radius: 25%; /* 正方形 */

}

.pattern-02.circle .icon-wrap:hover {

border-radius: 50%; /* 円 */

}

.pattern-02 .icon-wrap:hover.icon-wrap-facebook {

color: #1877f2;

}

.pattern-02 .icon-wrap:hover.icon-wrap-twitter {

color: #1da1f2;

}

.pattern-02 .icon-wrap:hover.icon-wrap-line {

color: #00B900;

}

HTML


<!-- 背景が正方形 -->
<ul class="pattern-03 square">
    <li>
        <a href="#" class="icon-wrap icon-wrap-instagram">
            <i class="fab fa-instagram fa-3x"></i>
        </a>
    </li>
    <li>
        <a href="#" class="icon-wrap icon-wrap-facebook">
            <i class="fab fa-facebook fa-3x"></i>
        </a>
    </li>
    <li>
        <a href="#" class="icon-wrap icon-wrap-twitter">
            <i class="fab fa-twitter fa-3x"></i>
        </a>
    </li>
    <li>
        <a href="#" class="icon-wrap icon-wrap-line">
            <i class="fab fa-line fa-3x"></i>
        </a>
    </li>
</ul>

<!-- 背景が円 -->
<ul class="pattern-03 circle">
    <li>
        <a href="#" class="icon-wrap icon-wrap-instagram">
            <i class="fab fa-instagram fa-3x"></i>
        </a>
    </li>
    <li>
        <a href="#" class="icon-wrap icon-wrap-facebook">
            <i class="fab fa-facebook fa-3x"></i>
        </a>
    </li>
    <li>
        <a href="#" class="icon-wrap icon-wrap-twitter">
            <i class="fab fa-twitter fa-3x"></i>
        </a>
    </li>
    <li>
        <a href="#" class="icon-wrap icon-wrap-line">
            <i class="fab fa-line fa-3x"></i>
        </a>
    </li>
</ul>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

CSS


/*
    アイコンの背景色が変わる
*/
.pattern-03 .icon-wrap {
    display: block;
    color: black;
}

.pattern-03 .icon-wrap.icon-wrap-instagram {
    /* Instagramのアイコンは縦に長い(= 正方形ではない)ので左右のpaddingを少し多めにとる */
    padding: 7px 9.125px;
}

.pattern-03 .icon-wrap.icon-wrap-facebook,
.pattern-03 .icon-wrap.icon-wrap-twitter {
    /* facebookとTwitterのアイコンは正方形なので、上下左右のpaddingの値は同じ */
    padding: 7px;
}

.pattern-03 .icon-wrap.icon-wrap-line {
    /* LINEのアイコンは縦に長い(= 正方形ではない)ので左右のpaddingを少し多めにとる */
    padding: 7px 10px;
}

.pattern-03 .icon-wrap:hover {
    color: white;
}

.pattern-03.square .icon-wrap:hover {
    border-radius: 25%; /* 正方形 */
}

.pattern-03.circle .icon-wrap:hover {
    border-radius: 50%; /* 円 */
}

.pattern-03 .icon-wrap:hover.icon-wrap-instagram {
    /* 【参考】 https://bungujoshi.com/ */
    background: -webkit-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -webkit-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%);
    background: -moz-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -moz-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%);
    background: -ms-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -ms-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%);
    background: -o-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -o-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%);
    background: radial-gradient(circle farthest-corner at 32% 106%, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), linear-gradient(135deg, #234bd7 12%, #c33cbe 58%);
}

.pattern-03 .icon-wrap:hover.icon-wrap-facebook {
    background-color: #1877f2;
}

.pattern-03 .icon-wrap:hover.icon-wrap-twitter {
    background-color: #1da1f2;
}

.pattern-03 .icon-wrap:hover.icon-wrap-line {
    background-color: #00B900;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

/*

アイコンの背景色が変わる

*/

.pattern-03 .icon-wrap {

display: block;

color: black;

}

.pattern-03 .icon-wrap.icon-wrap-instagram {

/* Instagramのアイコンは縦に長い(= 正方形ではない)ので左右のpaddingを少し多めにとる */

padding: 7px 9.125px;

}

.pattern-03 .icon-wrap.icon-wrap-facebook,

.pattern-03 .icon-wrap.icon-wrap-twitter {

/* facebookとTwitterのアイコンは正方形なので、上下左右のpaddingの値は同じ */

padding: 7px;

}

.pattern-03 .icon-wrap.icon-wrap-line {

/* LINEのアイコンは縦に長い(= 正方形ではない)ので左右のpaddingを少し多めにとる */

padding: 7px 10px;

}

.pattern-03 .icon-wrap:hover {

color: white;

}

.pattern-03.square .icon-wrap:hover {

border-radius: 25%; /* 正方形 */

}

.pattern-03.circle .icon-wrap:hover {

border-radius: 50%; /* 円 */

}

.pattern-03 .icon-wrap:hover.icon-wrap-instagram {

/* 【参考】 https://bungujoshi.com/ */

background: -webkit-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -webkit-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%);

background: -moz-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -moz-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%);

background: -ms-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -ms-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%);

background: -o-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -o-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%);

background: radial-gradient(circle farthest-corner at 32% 106%, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), linear-gradient(135deg, #234bd7 12%, #c33cbe 58%);

}

.pattern-03 .icon-wrap:hover.icon-wrap-facebook {

background-color: #1877f2;

}

.pattern-03 .icon-wrap:hover.icon-wrap-twitter {

background-color: #1da1f2;

}

.pattern-03 .icon-wrap:hover.icon-wrap-line {

background-color: #00B900;

}

SNSアイコンのHTML・CSSテンプレ(Instagram・Facebook・Twitter・LINE)

ソースコード

アイコンの色が変わる

アイコンの色が変わる(背景を白抜き)

アイコンの背景色が変わる

コメントを残すコメントをキャンセル

ソースコード

アイコンの色が変わる

アイコンの色が変わる(背景を白抜き)

アイコンの背景色が変わる

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル