구글 블로거에서는 몇 가지 아이콘을 기본으로 제공하고 있습니다. 요즘은 다양한 아이콘을 무료로 제공하는 곳이 많고 임베딩하기도 쉽지만 블로거의 기본 아이콘을 사용하고 싶은 분들 참고하시기 바랍니다. 다양하게 많이 사용하실 거면 그냥 구글 머티리얼 디자인 아이콘을 임베딩해서 쓰는 게 낫습니다. 아이콘 리스트 보시면 애초에 기본 아이콘이 구글 머티리얼 디자인 아이콘이에요.(같은 기업이니까!)
블로거의 아이콘을 추가하려면 식별자를 알아야 합니다. 블로거 홈 메뉴의 테마 > 맞춤설정 오른쪽의 ▼ > HTML 편집에서 원하는 곳에 다음과 같은 코드를 작성해야 합니다.
<b:include data='{ iconClass: "클래스명" }' name='식별자'/>
식별자는 하단에 목록을 추가하겠습니다. data에 있는 클래스명은 해당 아이콘에 지정할 클래스 이름을 입력하시면 됩니다. data는 아예 생략하셔도 됩니다. 생략하면 기본으로 추가되는 'svg-icon-24' 클래스만 추가됩니다.
위와 같이 작성해서 저장하면 다음과 같이 렌더링됩니다. 아예 <b: include> 태그 없이 아래 코드를 입력해서 아이콘을 넣어도 됩니다.
<svg class="svg-icon-24 클래스명"><use xlink:href="/responsive/sprite_v1_6.css.svg#식별자코드" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
svg-icon-24와 지정한 클래스명이 클래스로 지정된 <svg> 태그가 추가되면서 아이콘이 뜨게 됩니다. 만약에 돋보기 아이콘을 블로그에 표시하고 싶다면 HTML 수정에서 원하는 곳에 다음 코드를 붙여넣으면 됩니다.
<b:include data='{ iconClass: "search-icon" }' name='searchIcon'/>그럼 search-icon 클래스를 가진 <svg> 요소가 생성되며 돋보기 아이콘이 표시됩니다.
블로거 기본 SVG 아이콘 식별자 목록
어차피 첫 번째 코드가 렌더링되면 두 번째 코드가 되므로 둘 중 아무거나 쓰셔도 됩니다. 두 번째 코드는 작성 중인 글에 넣어도 아이콘이 표시됩니다. 원활한 CSS 수정을 위해 class를 추가해서 사용하세요.
총 26개의 아이콘이 있습니다.
| 아이콘 | 코드 |
|---|---|
<b:include name='emailIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_email_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='facebookIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_facebook_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='googlePlusIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_googlePlus_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='linkIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_link_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='pinterestIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_pinterest_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='twitterIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_twitter_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
| - | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_add_box_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='backArrowIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_arrow_back_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='forwardArrowIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_arrow_forward_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
| - | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_chat_bubble_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
| - | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_check_box_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
| - | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_check_box_outline_blank_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
| - | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_chevron_left_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
| - | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_chevron_right_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='closeIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_close_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='chevronUpIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='chevronDownIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='menuIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='commentIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_mode_comment_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='sharingOtherIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_more_horiz_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='verticalMoreIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_more_vert_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='defaultAvatarIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_person_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='flatBloggerIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_post_blogger_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
| - | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_rss_feed_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='searchIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_search_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> | |
<b:include name='shareIcon'/> | |
<svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_share_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> |
0 댓글