티스토리에 아이콘 삽입하기(Github, LinkedIn)

Font Awesome

티스토리에 SNS나 기타 아이콘을 삽입하고자 하는 경우

Font Awesome 사이트를 사용하면 된다.

 

 

사용 방법

1. 사이트에 접속해서 아이콘 찾기

나는 github, linkedin 아이콘만 필요했는데 이외에도 instagram, facebook 등의 소셜 아이콘이 있고

기타 무료 아이콘도 많으니 맘에 드는 걸로 하나 선택한다.

 

 

2. 블로그 환경설정(관리자 페이지) → 스킨 편집 클릭

 

 

3. html 편집 클릭

 

 

4. 사파리, 크롬 등에서 개발자 도구를 사용하여 삽입하고자 하는 위치의 태그 찾기

나는 카테고리 왼쪽에 아이콘을 삽입하고 싶어서 카테고리 부분의 태그를 찾았고,

사진은 이미 아이콘 3개를 추가한 뒤이다.

아래의 html 코드 부분의 구조를 보면

<nav id="gnb">    
    <ul class="tt_category">
        <li class>
            <ul class="category_list">
                <li class>

                </li>
            </ul>
        </li>
    </ul>
</nav>

이런 구조로 이루어져 있다.

어떤 스킨을 사용하는지, 어디에 삽입하고 싶은지에 따라 이 구조는 따라 달라지기 때문에

어떤 식으로 하면 되는지 참고만 하면 좋을 것 같다.

 

 

5. 아이콘 생성

<a href="이동하고자 하는 링크">빨간색 부분 삽입</a>

"빨간색 부분 삽입"이라고 되어있는 곳에 아까 Font Awesome에서 찾았던 아이콘의 HTML 태그를 삽입한다.

<a href="https://github.com/aerimforest"><i class="fab fa-github"></i></a>

font-size, color 속성을 통해 아이콘의 크기와 색상도 조절할 수 있다.

최종적으로 아래와 같은 코드가 만들어진다.

<a href="https://github.com/aerimforest"><i class="fab fa-github" style="font-size:25px;"></i></a>

 

 

6. 블로그 메인 화면에 아이콘 삽입

3번에서 들어갔던 html 편집 화면에서 ctrl+f를 통해 삽입해야 할 태그의 위치를 찾는다.

(나는 gnb로 검색하였다.)

<nav id="gnb">    
    <ul class="tt_category">
        <li class>
            <ul class="category_list">
                <li class>
                    [#_category_list_#]
                    [#_blog_menu_#]
                </li>
            </ul>
        </li>
    </ul>
</nav>

검색하면 이렇게 되어있고

이 안에 코드를 삽입하면 된다.

포트폴리오, Github, LinkeIn 이렇게 세 가지의 아이콘을 추가하였다.

<nav id="gnb">    
    <ul class="tt_category">
        <li class>
            <ul class="category_list">
                <li class>
                    <a href="https://aerimforest.github.io/"><i class="fab fa-pagelines" style="font-size:25px; color:#B7D668"></i></a>
                </li>
                <li class>
                    <a href="https://github.com/aerimforest"><i class="fab fa-github" style="font-size:25px;"></i></a>
                </li>
                <li class>
                    <a href="https://www.linkedin.com/in/aerimforest/"><i class="fab fa-linkedin" style="font-size:25px; color:#2D64BC"></i></a>
                </li>
            </ul>
        </li>
    </ul>

    <ul class="tt_category">
        <li class>
            <ul class="category_list">
                <li class>
                    [#_category_list_#] 
                    [#_blog_menu_#] 
                </li> 
            </ul>
        </li>
    </ul>
</nav>

끝!