htmlbootstrap-4multifile-uploader

create icon for multiple file upload


I would like to create an icon for multi file upload using bootstrap-4. I have referred this below code for single file upload > but, how to create an icon for multi file upload

     <!DOCTYPE html>
        <html>
         <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/
          3.3.7/css/bootstrap.min.css">
          <script 
   src="https://ajax.googleapis.com/ajax/libs/
     jquery/3.2.1/jquery.min.js">
       </script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/
    3.3.7/js/bootstrap.min.js"></script>
      </head>
      <body>
        <div class="container">
           <h2>Upload Glyph</h2>
  <p>Upload icon: <span class="glyphicon glyphicon-upload"></span></p>    
  <p>Upload icon as a link:
    <a href="#">
      <span class="glyphicon glyphicon-upload"></span>
    </a>
  </p>
  <p>Upload icon on a button:
    <button type="button" class="btn btn-default btn-sm">
      <span class="glyphicon glyphicon-upload"></span> Upload
    </button>
  </p>
  <p>Upload icon on a styled link button:
    <a href="#" class="btn btn-info btn-lg">
      <span class="glyphicon glyphicon-upload"></span> Upload
    </a>
  </p> 
  <p>Unicode:
    <span class="glyphicon">&#xe027;</span>
  </p> 
</div>

this is the icon, it produced, but how can I make it as multifileupload ? SINGLE-file-upload-icon


Solution

  • Bootstrap 4 doesn't include an icon font like it did in version 3. This leaves people free to choose whichever icon font they want to use.

    From your code it looks like you're using Bootstrap 3 though. All of the available icons are listed in their documentation. Just replace the glyphicon-upload class with the class for the icon you want to use (for instance, glyphicon-open).

    <button type="button" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-open"></span> Multi upload
    </button>
    

    Alternatively, rather than trying to create a new icon yourself, you can use two and change their positioning to give the appearance of a single icon:

    .btn .glyphicon + .glyphicon {
        margin-left: -5px; 
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <button type="button" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-arrow-up"></span><span class="glyphicon glyphicon-arrow-up"></span> Multi upload
    </button>