인포그래픽 아이콘사용방법
웹서버에 다운로드에서 사용할 수도 있으나 다운로드 없이도 사용이 가능합니다.
인포그래픽 아이콘을 사용하기 위해서는 해당 소스를 header.php 파일 내에
<head>
-- 중락--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
--중락--
</head>
중락 안에 있는 내용을 입력해주시면 됩니다.
그리고 인포그래픽 아이콘을 이용하기 위한 페이지에서 가셔서 아래와 같이 입력하면 편하게 사용 가능합니다.
ex) php 파일에 직접 사용시 (해당 사이트에 가시면 아래와 같이 사용 할 수 있는 소스가 있습니다)
<i class="fa fa-cloud" style="font-size:36px;"></i> fa fa-cloud 아이콘
전체 참고
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<p>일반적인 아이콘 종류별 표현 형식</p>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
<p>세련된 글꼴 멋진 아이콘 (크기, 색상, 그림자)</p>
<i class="fa fa-cloud" style="font-size:24px;"></i>
<i class="fa fa-cloud" style="font-size:36px;"></i>
<i class="fa fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fa fa-cloud" style="font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;"></i>
</body>
</html>
참고아이콘 : http://fontawesome.io/icons/
- HTML/CSS 참고링크
- CSS hover 스타일값을 다르게 보여주고 싶을때
- css 정의와 3가지 적용방식 및 사용법
- css경로 설정 및 스타일시트적용
- html 슬라이딩 소스 참고하세요.
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| Html5 표현태그 텍스트서식태그 (0) | 2017.07.12 |
|---|---|
| CSS a href 링크 / div 링크 100% 버튼 (8) | 2017.07.04 |
| CSS hover 스타일값을 다르게 보여주고 싶을때 (0) | 2017.06.18 |
| HTML/CSS 참고링크 (0) | 2017.06.17 |
| css 정의와 3가지 적용방식 및 사용법 (0) | 2017.05.02 |
