создать иконку для загрузки нескольких файлов - PullRequest
Новая
       17

создать иконку для загрузки нескольких файлов

0 голосов
/ 28 мая 2019

Я хотел бы создать иконку для загрузки нескольких файлов с помощью 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

1 Ответ

0 голосов
/ 28 мая 2019

Bootstrap 4 не включает в себя шрифт значка, как это было в версии 3. Это позволяет людям свободно выбирать любой шрифт значка, который они хотят использовать.

Из вашего кода похоже, что вы используете Bootstrap3 хотя.Все доступные значки перечислены в их документации .Просто замените класс 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...