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>

这是图标，它产生了，但是我如何将其设置为multifileupload？ SINGLE-file-upload-icon

Answer 1

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

从您的代码看来，您似乎正在使用Bootstrap 3。所有可用的图标均列在其documentation中。只需将glyphicon-upload类替换为要使用的图标的类即可（例如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>

创建多个文件上传的图标

1 个答案: