Почему я не могу изменить размер изображения в соответствии с текстом в CSS?

ProgramBox

Почему я не могу изменить размер изображения в соответствии с текстом в CSS?

Post author:admin
Запись опубликована:30 мая, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я получил изображение и следовал инструкциям отсюда, но по какой-то причине оно не работает. https://material.io/resources/icons/?search=fireamp;icon=whatshotamp;style=baseline
http://google.github.io/material-design-icons /

Вот инструкции, которые они дали:

 /* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

Это мой html-код:

 <head>
  <meta charset="utf-8">
  <title>Hello</title>

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu" rel="stylesheet">

  <!-- CSS Stylesheets -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">

  <!-- Font Awesome -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

  <!-- Google icon -->
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">

  <!-- Bootstrap Scripts -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

</head>

<body>
  <section class="colored-section" id="title">
    <div class="container-fluid">
      <!-- Nav Bar -->
      <nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="">
          <span class="material-icons">
            whatshot
          </span>hello</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#footer">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#pricing">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#cta">Download</a>
            </li>
          </ul>
        </div>
      </nav> </section> </body>

И это мой CSS-код:

 /* Navigation Bar */

.navbar {
  padding: 0 0 4.5rem;
}

.navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}

.nav-item {
  padding: 0 18px;
}

.nav-link {
  font-size: 1.2rem;
  font-family: "Montserrat-Light";
}

.material-icons.md-48 { font-size: 48px; }

Но независимо от того, какое число я изменяю в своей последней строке css, значок не становится больше, как я хочу. Заранее спасибо и спасибо за чтение

Ответ №1:

Джентльмены, я бы сказал, что в вашем коде есть очень небольшое изменение.

Добавьте дополнительный класс помимо класса material-icon из ( md-18 , md-24 , md-36 , md-48 ) согласно вашему требованию.
Вы пропустили одно из закрытий для div (я поместил комментарий в код).

Пожалуйста, найдите приведенный ниже код

 .colored-section {
        background: #888;
      }
      /* Navigation Bar */

      .navbar {
        padding: 0 0 4.5rem;
      }

      .navbar-brand {
        font-family: 'Ubuntu';
        font-size: 2.5rem;
        font-weight: bold;
      }
      .navbar-dark .navbar-brand {
        display: flex;
        align-items: center;
      }

      .nav-item {
        padding: 0 18px;
      }

      .nav-link {
        font-size: 1.2rem;
        font-family: 'Montserrat-Light';
      }

      .material-icons.md-48 {
        font-size: 48px;
      }

 <head>
    <meta charset="utf-8" />
    <title>Hello</title>

    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu"
      rel="stylesheet"
    />

    <!-- CSS Stylesheets -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="css/styles.css" />

    <!-- Font Awesome -->
    <script
      defer
      src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"
    ></script>

    <!-- Google icon -->
    <link
      href="https://fonts.googleapis.com/icon?family=Material Icons"
      rel="stylesheet"
    />

    <!-- Bootstrap Scripts -->
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>

    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl"
      crossorigin="anonymous"
    ></script>
  </head>

  <body>
    <section class="colored-section" id="title">
      <div class="container-fluid">
        <!-- Nav Bar -->
        <nav class="navbar navbar-expand-lg navbar-dark">
          <a class="navbar-brand" href="">
          <!-- additional class added along with material-icons -->
          <span class="material-icons md-36">whatshot</span>hello</a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarTogglerDemo02"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="#footer">Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#pricing">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#cta">Download</a>
              </li>
            </ul>
          </div>
        </nav>
      <!-- forgotten closing for the div -->
      </div>
    </section>
  </body>

Развернуть фрагмент

Ответ №2:

Если ваш CSS находится внутри styles.css, то вам следует включить эту таблицу стилей после значков материалов, чтобы она перезаписывалась. Таблица стилей значков материалов имеет размер шрифта по умолчанию 24 пикселя. CSS всегда будет применять последнее правило, которое он находит во всех таблицах стилей, поэтому, если после указано правило размера шрифта материала, все, что вы делаете «выше», не будет иметь значения.

1. На самом деле я вижу, что вы объединяете классы в css, поэтому вам может просто не хватать этого дополнительного класса. Например: md-48. Если оба класса не находятся в одном теге span, это правило не применяется. У вас есть только класс «material-icons» в этом теге span, но в вашем css у вас есть .material-icons.md-48 { font-size: 48px; }. Это правило никогда не будет применено, потому что нет тега с обоими классами.

Ответ №3:

Вам просто нужно добавить .md-48 к вашему элементу.

       <span class="material-icons">
        whatshot
      </span>hello</a>

становится;

       <span class="material-icons md-48">
        whatshot
      </span>hello</a>

Помните, когда вы создаете класс, вы должны ПРИМЕНИТЬ класс к элементу.

Ответ №4:

Причина, по которой размер значков материалов не изменяется, заключается в том, что вы не включили md тег в свой код. Исправьте это, как я упоминал ниже. Вы можете добавлять ( md-18, md-24, md-36, md-48 ) все, что хотите.

  <span class="material-icons md-48">

Ваши шрифты белые. Итак, ничего не было показано. Итак, я добавляю цвет фона в ваш раздел заголовка. По вашему желанию вы также можете изменить его.

  #title{
    background:black;
  }
  .navbar {
  padding: 0 0 4.5rem;
}

.navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}

.nav-item {
  padding: 0 18px;
}

.nav-link {
  font-size: 1.2rem;
  font-family: "Montserrat-Light";
}

.material-icons.md-48 { font-size: 48px; }

 <head>
  <meta charset="utf-8">
  <title>Hello</title>

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu" rel="stylesheet">

  <!-- CSS Stylesheets -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">

  <!-- Font Awesome -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

  <!-- Google icon -->
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">

  <!-- Bootstrap Scripts -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

</head>

<body>
  <section class="colored-section" id="title">
    <div class="container-fluid">
      <!-- Nav Bar -->
      <nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="">
          <span class="material-icons md-48">
            whatshot
          </span>hello</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#footer">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#pricing">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#cta">Download</a>
            </li>
          </ul>
        </div>
      </nav> </section> </body>

Ответ №5:

Если вы хотите, чтобы размер был 48 пикселей, вам нужно добавить этот класс ‘md-48’ к диапазону следующим образом

 <span class="material-icons md-48">whatshot</span>

если вы хотите, чтобы оно было 36, просто замените его на ‘md-36’ и так далее.

 .material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

 <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu" rel="stylesheet">

  <!-- Font Awesome -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

  <!-- Google icon -->
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">
    <span class="material-icons md-48">whatshot</span>
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#footer">Contact <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#pricing">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#pricing">Download</a>
      </li>
    </ul>
  </div>
</nav>
  <div class="container">
  <!-- Content here -->
    <h1>Hello, world!</h1>
  </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>
  </body>
</html>

Развернуть фрагмент

Ответ №6:

В вашем коде вы забыли ссылку на темы материалов:

 <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">

и закрывающий div отсутствует перед закрывающим тегом section.

Ответ №7:

Во-первых, чтобы убедиться, что ваш значок работает должным образом, проверьте следующие факторы:

Вы должны использовать названия значков, которые являются шрифтом, а не пользовательским текстом

Пример:

 <span class="material-icons">date_range</span>

Проверьте, имеет ли ваш элемент семейство шрифтов, состоящее из значков материалов

Измените размер значка:

Вам нужно добавить к вашей иконке класс md-{number}

 <span class="material-icons md-18">whatshot</span>

Также на изображении выше вы можете видеть, что размер значка составляет 24 пикселя, просто измените его в вашем css.

Ответ №8:

Вам нужно добавить md-48 класс к вашему элементу span:

   <span class="material-icons md-48">
    ...
  </span>

Ответ №9:

Пожалуйста, проверьте приведенный ниже фрагмент, вы можете обойти CSS правила по умолчанию и применить свои собственные к значкам, например, в приведенном ниже фрагменте есть некоторые изменения, чтобы все navbar элементы располагались по центру по вертикали.

 /* Navigation Bar */
:root {
  --md-size: 48px;
  --sm-size: 36px;
}
#title {
  background-color:#000;
}
.navbar {
  padding: 0;
  margin: 0;
  line-height: var(--md-size);
  min-height: var(--md-size);
}
.navbar-brand *{
  padding: 0;
  margin: 0;
}
.navbar-brand .material-icons{
  align-self: center;
  vertical-align: middle;
}
.navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold; 
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  place-content: center space-evenly;
}


.nav-link {
  font-size: 1.2rem;
  font-family: "Montserrat-Light";
}
#title .material-icons {
  font-size: var(--sm-size);
}
#title .material-icons.md-48 {
  font-size: var(--md-size);
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu" rel="stylesheet">

<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Font Awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

<!-- Google icon -->
<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">

<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>


<section class="colored-section" id="title">
  <div class="container-fluid">
    <!-- Nav Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="">
      <span class="material-icons md-48">
            whatshot
          </span>
        <span class="material-icons">
            whatshot
          </span>hello</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#footer">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#pricing">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#cta">Download</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</section>

Ответ №10:

 <style>  
.gfg { 
    width:auto; 
    text-align:center; 
    padding:20px; 
} 
img { 
    max-width:100%; 
    height:auto; 
} 
</style>