Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 81
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    Một số icon svg trong template mặc định và cách sử dụng

                    Các mẫu template mới mặc định của Blogger chỉ sử dụng duy nhất biểu tượng svg được mình cập nhật danh sách dưới đây, tuy nhiên nếu bạn muốn lấy danh sách nhiều hơn bạn có thể truy cập trang web materialpalette.com họ cập nhật rất nhiều biểu tượng.

                    Tác dụng khi sử dụng biểu tượng svg không sử dụng đến thư viện font awesome và material design, dưới đây là danh sách các biểu tượng mặc định


                    Danh sách theo thứ tự biểu tượng từ trái qua

                    Copy
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_search_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_more_horiz_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_more_vert_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_arrow_back_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><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><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><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><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_chevron_right_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_close_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_share_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_link_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_facebook_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_twitter_dark"xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_pinterest_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_googlePlus_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_email_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_add_box_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><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><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_mode_comment_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><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><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><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_person_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
                    <svg><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><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_rss_feed_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>

                    Cách sử dụng:

                    + Chèn link svg vào nơi muốn hiển thị ví dụ:

                    Copy
                    <button type="submit">
                      <svg>
                        <use xlink:href="/responsive/sprite_v1_6.css.svg#ic_search_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink">
                        </use>
                      </svg>
                    </button>

                    + css hiển thị

                    Đặt class hay id trước svg hoặc chỉ ghi svg sử dụng chung cho tất cả các class hoặc id hoặ có thề đặt class trực tiếp trong svg, xem các ví dụ:

                    - Sử dụng chung:

                    Copy
                    svg {
                        fill: #707070;
                        height: 30px;
                        width: 30px;
                        min-width: 30px;
                        vertical-align: text-bottom;
                    }

                    - Sử dụng cho một class cụ thể

                    Copy
                    .se svg {
                        fill: #707070;
                        height: 30px;
                        width: 30px;
                        min-width: 30px;
                        vertical-align: text-bottom;
                    }

                    - Sử dụng class trong svg

                    Copy
                    <svg class='button-icon'>
                        <use xlink:href="/responsive/sprite_v1_6.css.svg#ic_search_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink">
                        </use>
                      </svg>

                    Copy
                    .button-icon {
                        fill: #707070;
                        height: 30px;
                        width: 30px;
                        min-width: 30px;
                        vertical-align: text-bottom;
                    }

                    Chấm hết bài!!!
                    Nội dung chính
                      Bài đăng mới hơn Bài đăng cũ hơn