• * 메뉴에 아이콘(font-awesome) 적용하기 

     

    사이트 맵 생성 시 메뉴 명 입력란에 font-awesome 코드를 넣어줍니다. 단, " 큰 따옴표 대신 ' 작은 따옴표를 사용하면 됩니다. 

    ex) <i class='fa fa-user'></i>&nbsp; 회사소개

     

    &nbsp; : non-breaking space 줄 바꿈 없는 공백을 만들어줍니다.

     

     

    * 패럴랙스 영역 목록형 꾸미기

     

    br 줄 바꿈 태그와 아이콘(font-awesome)으로 목록 형태 문장을 꾸며보세요.

     

    ex) 

    패럴랙스 섹션으로 배경 이미지 및 위젯 코드를 삽입하여 최근 게시물을 불러오거나 컨텐츠 이미지를 사용할 수 있습니다.

    <br /><br />

    <i class="fa fa-check-square-o"></i>  1컬럼 & 2컬럼 선택<br />

    <i class="fa fa-check-square-o"></i>  배경 이미지 업로드 (1920x1020px 권장)<br />

    <i class="fa fa-check-square-o"></i>  타이틀 및 내용 입력 (html 활용 권장)<br />

    <i class="fa fa-check-square-o"></i>  버튼 링크 입력 (비워두면 출력 안함)<br />

    <i class="fa fa-check-square-o"></i>  2컬럼 사용 시 이미지 또는 빈 공간(위젯,영상 등) 활용<br />

     

    * 하나의 br 태그 사용 시 줄 바꿈, 2 개의 br 태그 사용 시 한 줄 띄울 수 있습니다.

    Font Awesome 3 

    Font Awesome은 아이콘 폰트로 웹사이트를 꾸미는데 있어 유용하게 사용할 수 있습니다.
    KSODESIGN의 레이아웃에는 Font Awesome 파일이 내장되어있으므로 필요한 곳에 아래 사용방법을 이용하여 레이아웃, 페이지, 게시판 등에 이용하시면 됩니다.

     

    기본 사용법 : <i class="아이콘명"></i>

     아이콘 적용방법

    강제 정렬 : pull-left

    폰트 어썸을 활용하여 정교하고 깔끔한 페이지를 꾸며보시기 바랍니다. 이미지를 사용하지 않고도 깔끔한 디자인과 인포그라피 효과까지 얻을 수 있습니다.

    사이즈 활용법 : icon-2x

     반응형 디자인

     

     반응형 디자인

     

     반응형 디자인

     

    NEW ICONS IN 3.2

     icon-compass
     icon-collapse
     icon-collapse-top
     icon-expand
     icon-eur
     icon-euro (alias)
     icon-gbp
     icon-usd
     icon-dollar (alias)
     icon-inr
     icon-rupee (alias)
     icon-jpy
     icon-yen (alias)
     icon-cny
     icon-renminbi (alias)
     icon-krw
     icon-won (alias)
     icon-btc
     icon-bitcoin (alias)
     icon-file
     icon-file-text
     icon-sort-by-alphabet
     icon-sort-by-alphabet-alt
     icon-sort-by-attributes
     icon-sort-by-attributes-alt
     icon-sort-by-order
     icon-sort-by-order-alt
     icon-thumbs-up
     icon-thumbs-down
     icon-youtube-sign
     icon-youtube
     icon-xing
     icon-xing-sign
     icon-youtube-play
     icon-dropbox
     icon-stackexchange
     icon-instagram
     icon-flickr
     icon-adn
     icon-bitbucket
     icon-bitbucket-sign
     icon-tumblr
     icon-tumblr-sign
     icon-long-arrow-down
     icon-long-arrow-up
     icon-long-arrow-left
     icon-long-arrow-right
     icon-apple
     icon-windows
     icon-android
     icon-linux
     icon-dribbble
     icon-skype
     icon-foursquare
     icon-trello
     icon-female
     icon-male
     icon-gittip
     icon-sun
     icon-moon
     icon-archive
     icon-bug
     icon-vk
     icon-weibo
     icon-renren

    WEB APPLICATION ICONS

     icon-adjust
     icon-anchor
     icon-archive
     icon-asterisk
     icon-ban-circle
     icon-bar-chart
     icon-barcode
     icon-beaker
     icon-beer
     icon-bell
     icon-bell-alt
     icon-bolt
     icon-book
     icon-bookmark
     icon-bookmark-empty
     icon-briefcase
     icon-bug
     icon-building
     icon-bullhorn
     icon-bullseye
     icon-calendar
     icon-calendar-empty
     icon-camera
     icon-camera-retro
     icon-certificate
     icon-check
     icon-check-empty
     icon-check-minus
     icon-check-sign
     icon-circle
     icon-circle-blank
     icon-cloud
     icon-cloud-download
     icon-cloud-upload
     icon-code
     icon-code-fork
     icon-coffee
     icon-cog
     icon-cogs
     icon-collapse
     icon-collapse-alt
     icon-collapse-top
     icon-comment
     icon-comment-alt
     icon-comments
     icon-comments-alt
     icon-compass
     icon-credit-card
     icon-crop
     icon-dashboard
     icon-desktop
     icon-download
     icon-download-alt
     icon-edit
     icon-edit-sign
     icon-ellipsis-horizontal
     icon-ellipsis-vertical
     icon-envelope
     icon-envelope-alt
     icon-eraser
     icon-exchange
     icon-exclamation
     icon-exclamation-sign
     icon-expand
     icon-expand-alt
     icon-external-link
     icon-external-link-sign
     icon-eye-close
     icon-eye-open
     icon-facetime-video
     icon-female
     icon-fighter-jet
     icon-film
     icon-filter
     icon-fire
     icon-fire-extinguisher
     icon-flag
     icon-flag-alt
     icon-flag-checkered
     icon-folder-close
     icon-folder-close-alt
     icon-folder-open
     icon-folder-open-alt
     icon-food
     icon-frown
     icon-gamepad
     icon-gear (alias)
     icon-gears (alias)
     icon-gift
     icon-glass
     icon-globe
     icon-group
     icon-hdd
     icon-headphones
     icon-heart
     icon-heart-empty
     icon-home
     icon-inbox
     icon-info
     icon-info-sign
     icon-key
     icon-keyboard
     icon-laptop
     icon-leaf
     icon-legal
     icon-lemon
     icon-level-down
     icon-level-up
     icon-lightbulb
     icon-location-arrow
     icon-lock
     icon-magic
     icon-magnet
     icon-mail-forward (alias)
     icon-mail-reply (alias)
     icon-mail-reply-all
     icon-male
     icon-map-marker
     icon-meh
     icon-microphone
     icon-microphone-off
     icon-minus
     icon-minus-sign
     icon-minus-sign-alt
     icon-mobile-phone
     icon-money
     icon-moon
     icon-move
     icon-music
     icon-off
     icon-ok
     icon-ok-circle
     icon-ok-sign
     icon-pencil
     icon-phone
     icon-phone-sign
     icon-picture
     icon-plane
     icon-plus
     icon-plus-sign
     icon-plus-sign-alt
     icon-power-off (alias)
     icon-print
     icon-pushpin
     icon-puzzle-piece
     icon-qrcode
     icon-question
     icon-question-sign
     icon-quote-left
     icon-quote-right
     icon-random
     icon-refresh
     icon-remove
     icon-remove-circle
     icon-remove-sign
     icon-reorder
     icon-reply
     icon-reply-all
     icon-resize-horizontal
     icon-resize-vertical
     icon-retweet
     icon-road
     icon-rocket
     icon-rss
     icon-rss-sign
     icon-screenshot
     icon-search
     icon-share
     icon-share-alt
     icon-share-sign
     icon-shield
     icon-shopping-cart
     icon-sign-blank
     icon-signal
     icon-signin
     icon-signout
     icon-sitemap
     icon-smile
     icon-sort
     icon-sort-by-alphabet
     icon-sort-by-alphabet-alt
     icon-sort-by-attributes
     icon-sort-by-attributes-alt
     icon-sort-by-order
     icon-sort-by-order-alt
     icon-sort-down
     icon-sort-up
     icon-spinner
     icon-star
     icon-star-empty
     icon-star-half
     icon-star-half-empty
     icon-star-half-full (alias)
     icon-subscript
     icon-suitcase
     icon-sun
     icon-superscript
     icon-tablet
     icon-tag
     icon-tags
     icon-tasks
     icon-terminal
     icon-thumbs-down
     icon-thumbs-down-alt
     icon-thumbs-up
     icon-thumbs-up-alt
     icon-ticket
     icon-time
     icon-tint
     icon-trash
     icon-trophy
     icon-truck
     icon-umbrella
     icon-unchecked (alias)
     icon-unlock
     icon-unlock-alt
     icon-upload
     icon-upload-alt
     icon-user
     icon-volume-down
     icon-volume-off
     icon-volume-up
     icon-warning-sign
     icon-wrench
     icon-zoom-in
     icon-zoom-out

    CURRENCY ICONS

     icon-bitcoin (alias)
     icon-btc
     icon-cny
     icon-dollar (alias)
     icon-eur
     icon-euro (alias)
     icon-gbp
     icon-inr
     icon-jpy
     icon-krw
     icon-renminbi (alias)
     icon-rupee (alias)
     icon-usd
     icon-won (alias)
     icon-yen (alias)

    TEXT EDITOR ICONS

     icon-align-center
     icon-align-justify
     icon-align-left
     icon-align-right
     icon-bold
     icon-columns
     icon-copy
     icon-cut
     icon-eraser
     icon-file
     icon-file-alt
     icon-file-text
     icon-file-text-alt
     icon-font
     icon-indent-left
     icon-indent-right
     icon-italic
     icon-link
     icon-list
     icon-list-alt
     icon-list-ol
     icon-list-ul
     icon-paper-clip
     icon-paperclip (alias)
     icon-paste
     icon-repeat
     icon-rotate-left (alias)
     icon-rotate-right (alias)
     icon-save
     icon-strikethrough
     icon-table
     icon-text-height
     icon-text-width
     icon-th
     icon-th-large
     icon-th-list
     icon-underline
     icon-undo
     icon-unlink

    DIRECTIONAL ICONS

     icon-angle-down
     icon-angle-left
     icon-angle-right
     icon-angle-up
     icon-arrow-down
     icon-arrow-left
     icon-arrow-right
     icon-arrow-up
     icon-caret-down
     icon-caret-left
     icon-caret-right
     icon-caret-up
     icon-chevron-down
     icon-chevron-left
     icon-chevron-right
     icon-chevron-sign-down
     icon-chevron-sign-left
     icon-chevron-sign-right
     icon-chevron-sign-up
     icon-chevron-up
     icon-circle-arrow-down
     icon-circle-arrow-left
     icon-circle-arrow-right
     icon-circle-arrow-up
     icon-double-angle-down
     icon-double-angle-left
     icon-double-angle-right
     icon-double-angle-up
     icon-hand-down
     icon-hand-left
     icon-hand-right
     icon-hand-up
     icon-long-arrow-down
     icon-long-arrow-left
     icon-long-arrow-right
     icon-long-arrow-up

    VIDEO PLAYER ICONS

     icon-backward
     icon-eject
     icon-fast-backward
     icon-fast-forward
     icon-forward
     icon-fullscreen
     icon-pause
     icon-play
     icon-play-circle
     icon-play-sign
     icon-resize-full
     icon-resize-small
     icon-step-backward
     icon-step-forward
     icon-stop
     icon-youtube-play

    BRAND ICONS

     icon-adn
     icon-android
     icon-apple
     icon-bitbucket
     icon-bitbucket-sign
     icon-bitcoin (alias)
     icon-btc
     icon-css3
     icon-dribbble
     icon-dropbox
     icon-facebook
     icon-facebook-sign
     icon-flickr
     icon-foursquare
     icon-github
     icon-github-alt
     icon-github-sign
     icon-gittip
     icon-google-plus
     icon-google-plus-sign
     icon-html5
     icon-instagram
     icon-linkedin
     icon-linkedin-sign
     icon-linux
     icon-maxcdn
     icon-pinterest
     icon-pinterest-sign
     icon-renren
     icon-skype
     icon-stackexchange
     icon-trello
     icon-tumblr
     icon-tumblr-sign
     icon-twitter
     icon-twitter-sign
     icon-vk
     icon-weibo
     icon-windows
     icon-xing
     icon-xing-sign
     icon-youtube
     icon-youtube-play
     icon-youtube-sign

    MEDICAL ICONS

     icon-ambulance
     icon-h-sign
     icon-hospital
     icon-medkit
     icon-plus-sign-alt
     icon-stethoscope
     icon-user-md
    페이스북 트위터 미투데이 요즘 마이피플