[HTML] 아이콘 넣기 - font awesome

이런 아이콘들을 넣어보자.

 

아이콘들을 직접 포토샵으로 그려서 쓸 수도 있겠지만

간단하게 font-awesome 라이브러리를 이용해 보자.

 

https://cdnjs.com/libraries/font-awesome/5.5.0

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

여기서 all.min.css 링크를 복사해서 

head 태그 안에 붙여넣자.

 

 

https://fontawesome.com/v5/search

Font Awesome

 

그리고 여기서 사용할 아이콘을 검색 해 보자.

 

그럼 <i>로 시작하는 코드가 나오는데,

이 코드를 복사해서 아이콘을 넣을 위치에 붙여넣자.

 

붙여넣으면 저 아이콘이 나타난다.

아이콘은 폰트와 같이 사이즈조절, 가운데정렬, 색 변경등이 가능하다.

(크기 조절은 간단하게 할 수 있는데, 클래스명 뒤에 fa-2x, fa-3x등으로 넣으면 아이콘이 2배,3배크기가 된다)

 

그런데, 아이콘 뒤에 동그란 배경은 어떻게 넣을까?

 

    <div class="menu-info-container">
        <div class="menu-info">
           <i class="fas fa-shopping-cart fa-2x"></i>
            <h4>Fast Shipping</h4>
            <p>Lorem ipsum</p>
        </div>
        <div class="menu-info">
           <i class="fas fa-globe-asia fa-2x"></i>
            <h4>Good Service</h4>
            <p>Lorem ipsum</p>
        </div>
        <div class="menu-info">
           <i class="fas fa-ticket-alt fa-2x"></i>
            <h4>Free Coupons</h4>
            <p>Lorem ipsum</p>
        </div>
        <div class="menu-info">
           <i class="fas fa-tablet-alt fa-2x"></i>
            <h4>New Products</h4>
            <p>Lorem ipsum</p>
        </div>
    </div>

대충 이런 식으로 아이콘들과 글자가 있다고 하자.

 

.menu-info-container i {
    background: burlywood;
    height: 80px;
    width: 80px;
    border-radius: 50px;
    padding-top: 25px;
    box-sizing: border-box;
    color: white;
    text-align: center;
}

menu-info-container에 있는 모든 i에 적용될 수 있도록

css파일에

.menu-info-container i을 열어 작성했다.

 

여기서 배경색,높이,너비를 설정하고 

border-radius를 줘서 동그랗게 연출할 수 있다.