为多个文件上传创建图标

Question

我想使用 bootstrap-4 为多文件上传创建一个图标。我已经将下面的代码称为单个文件上传 > 但是，如何为多文件上传创建图标

     <!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>

这是它生成的图标，但我怎样才能将它制作成多文件上传？ SINGLE-file-upload-icon

Answer 1

Bootstrap 4 不像版本 3 那样包含图标字体。这让人们可以自由选择他们想要使用的图标字体。

从您的代码看来您使用的是 Bootstrap 3。所有可用的图标都列在它们的 documentation 中。只需将 glyphicon-upload class 替换为您要使用的图标的 class（例如，glyphicon-open）。

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

或者，与其尝试自己创建一个新图标，不如使用两个并更改它们的位置以提供单个图标的外观：

.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>

为多个文件上传创建图标

create icon for multiple file upload

html

multifile-uploader

bootstrap-4