Materialize CSS图标用法详细指南

2021年4月2日12:20:05 发表评论 925 次浏览

Materialize CSS提供了丰富的google原生图标集, 可以从以下位置下载原生设计规格。Materialize CSS支持的图标库是Google Material图标, 字体真棒图标和引导图标。可以从中选择不同的图标原生图标。

库和用法:要使用这些图标, 请在HTML代码的<head>部分中添加以下行。

<link href =" https://fonts.googleapis.com/icon?family=Material+Icons" rel ="样式表">

然后, 要使用图标, 请在HTML元素的<i>部分中提供图标的名称。

<i class="material-icons">add</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>

例子:

HTML

<!DOCTYPE html>
<html>
  
<head>
     <!--Import Google Icon Font-->
     <link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
         rel = "stylesheet">
  
     <!-- Compiled and minified CSS -->
     <link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  
     <script type = "text/javascript" src =
"https://code.jquery.com/jquery-2.1.1.min.js">
     </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 =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
     </script>
</body>
  
</html>

输出如下:

Materialize CSS图标用法详细指南

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: