Материализовать CSS | Иконки
Materialize CSS предоставляет богатый набор значков материалов Google, которые можно загрузить из спецификаций Material Design. Материализовать css поддерживает библиотеки значков: значки материалов Google, значки Font Awesome и значки начальной загрузки . Из значков материалов можно выбрать различные значки.
Библиотека и использование: чтобы использовать этот значок, в часть <head> HTML-кода добавляется следующая строка.
<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>
Затем, чтобы использовать значки, имя значка предоставляется в части <i> элемента HTML.
<i class = "material-icons"> добавить </i>
Размеры значков материалов: Materialize CSS предоставляет значки четырех размеров: крошечные, маленькие, средние и большие. Размеры крошечного, маленького, среднего и большого - 1 бэр, 2 бэр, 4 бэр и 6 бэр соответственно.
<i class = "material-icons tiny">add</i> <i class = "material-icons small">add</i> <i class = "material-icons">add</i> <i class = "material-icons medium">add</i> <i class = "material-icons large">add</i>
Example:
HTML
<!DOCTYPE html><html> <head> <!--Import Google Icon Font--> <link href= rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= <script type="text/javascript" src= </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /></head> <body> <div class="card-panel"> <h3 class="green-text">Icons</h3> <div class="container"> <div class="row"> <div class="col"> <i class="material-icons tiny">account_circle</i> </div> <div class="col"> <i class="material-icons"> account_circle</i> </div> <div class="col"> <i class="material-icons small">account_circle</i> </div> <div class="col"> <i class="material-icons medium">account_circle</i> </div> <div class="col"> <i class="material-icons large">account_circle</i> </div> </div> </div> </div> <!-- Compiled and minified JavaScript --> <script src= </script></body> </html> |
Выход:
