Add icons as buttons in html-CodePudding

Add icons as buttons in html. for example, Add as plus icon and delete as minus icon. For below ex, I need to see plus icon on teh screen rather than Add. Please help me to resolve this.

CodePudding user response：

Add an icon library, such as font awesome, and append icons to HTML buttons

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Add icon library -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .btn {
      background-color: DodgerBlue;
      border: none;
      color: white;
      padding: 12px 16px;
      font-size: 16px;
      cursor: pointer;
    }
    /* Darker background on mouse-over */
    
    .btn:hover {
      background-color: RoyalBlue;
    }
  </style>
</head>

<body>

  <button ><i ></i></button>
  <button ><i ></i></button>

</body>

</html>

for more information- https://www.w3schools.com/howto/howto_css_icon_buttons.asp