Vật liệu - Biểu tượng trình chỉnh sửa
Chương này giải thích cách sử dụng các biểu tượng Trình chỉnh sửa (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng Trình chỉnh sửa (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -
Sử dụng | Kết quả |
---|---|
<i class = "material-icon custom"> attachment_file </i> | tệp đính kèm |
<i class = "material-icon custom"> attachment_money </i> | Att_money |
<i class = "material-icon custom"> border_all </i> | border_all |
<i class = "material-icon custom"> border_bottom </i> | border_bottom |
<i class = "material-icon custom"> border_clear </i> | border_clear |
<i class = "material-icon custom"> border_color </i> | viền_màu |
<i class = "material-icon custom"> border_horizontal </i> | border_horiz Ngang |
<i class = "material-icon custom"> border_inner </i> | border_inner |
<i class = "material-icon custom"> border_left </i> | border_left |
<i class = "material-icon custom"> border_outer </i> | border_outer |
<i class = "material-icon custom"> border_right </i> | border_right |
<i class = "material-icon custom"> border_style </i> | kiểu viền |
<i class = "material-icon custom"> border_top </i> | border_top |
<i class = "material-icon custom"> border_vertical </i> | border_vertical |
<i class = "material-icon custom"> format_align_center </i> | format_align_center |
<i class = "material-icon custom"> format_align_justify </i> | format_align_justify |
<i class = "material-icon custom"> format_align_left </i> | format_align_left |
<i class = "material-icon custom"> format_align_right </i> | format_align_right |
<i class = "material-icon custom"> format_bold </i> | format_bold |
<i class = "material-icon custom"> format_clear </i> | format_clear |
<i class = "material-icon custom"> format_color_fill </i> | format_color_fill |
<i class = "material-icon custom"> format_color_reset </i> | format_color_reset |
<i class = "material-icon custom"> format_color_text </i> | format_color_text |
<i class = "material-icon custom"> format_indent_decrease </i> | format_indent_decrease |
<i class = "material-icon custom"> format_indent_increase </i> | format_indent_increase |
<i class = "material-icon custom"> format_italic </i> | format_italic |
<i class = "material-icon custom"> format_line_spacing </i> | format_line_spacing |
<i class = "material-icon custom"> format_list_bulleted </i> | format_list_bulleted |
<i class = "material-icon custom"> format_list_numbered </i> | format_list_numbered |
<i class = "material-icon custom"> format_paint </i> | format_paint |
<i class = "material-icon custom"> format_quote </i> | format_quote |
<i class = "material-icon custom"> format_size </i> | format_size |
<i class = "material-icon custom"> format_strikethrough </i> | format_strikethrough |
<i class = "material-icon custom"> format_textdirection_l_to_r </i> | format_textdirection_l_to_r |
<i class = "material-icon custom"> format_textdirection_r_to_l </i> | format_textdirection_r_to_l |
<i class = "material-icon custom"> format_underline </i> | format_underline |
<i class = "material-icon custom"> chức năng </i> | chức năng |
<i class = "material-icon custom"> insert_chart </i> | insert_chart |
<i class = "material-icon custom"> insert_comment </i> | chèn nhận xét |
<i class = "material-icon custom"> insert_drive_file </i> | insert_drive_file |
<i class = "material-icon custom"> insert_emoticon </i> | insert_emoticon |
<i class = "material-icon custom"> insert_invitation </i> | insert_invitation |
<i class = "material-icon custom"> insert_link </i> | chèn đường dẫn |
<i class = "material-icon custom"> insert_photo </i> | insert_photo |
<i class = "material-icon custom"> merge_type </i> | merge_type |
<i class = "material-icon custom"> mode_comment </i> | mode_comment |
<i class = "material-icon custom"> mode_edit </i> | mode_edit |
<i class = "material-icon custom"> money_off </i> | tiền ra |
<i class = "material-icon custom"> xuất bản </i> | công bố |
<i class = "material-icon custom"> space_bar </i> | dấu cách |
<i class = "material-icon custom"> strikethrough_s </i> | Strike_s |
<i class = "material-icon custom"> vertical_align_bottom </i> | vertical_align_bottom |
<i class = "material-icon custom"> vertical_align_center </i> | vertical_align_center |
<i class = "material-icon custom"> vertical_align_top </i> | vertical_align_top |
<i class = "material-icon custom"> wrap_text </i> | bao text |