Есть ли способ сделать иконку из другого источника одинакового размера?

У меня есть три контейнера. В каждом контейнере есть значок, заголовок и абзац. Но я использую значок из другого источника. Значок кулака (брендинг) от Google, а другой оставшийся значок (настольный, мобильный) от fontawesome. Проблема в первом значке не имеет одинакового размера с двумя оставшимися значками, и это приводит к тому, что заголовок и абзац элемента брендинга не отображаются в одной строке с заголовком и абзацем остаточного элемента. Я пытаюсь исправить это, поместив первый значок в контейнер и отрегулировав его. положение, но оно не работает. Есть ли способ сделать все значки одинакового размера?

Картина enter image description here Первая иконка в контейнере

<div class="i-container">
   <i class="material-icons" id="Branding">menu_book</i>
</div>   

.work-container{
    width:1200px;
    border: 1px solid green;
    display: flex;
}

.box{
    border:1px solid #c59a6d;
    height:430px;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
}

.box i{
    margin-top: 80px;
    margin-bottom: 24px;
}
.i-container{
    height: 180px;
    display: flex;
    justify-content: center;
    position: relative;
   
}
.i-container i{
    font-size: 120px;
    position: absolute;
    top: -28px;
}
/*
.box i.material-icons{
    color:blue;
    font-size: 100px;
    margin-top:60px;
    margin-bottom: 20px;
}*/
.box h2{
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 36px;
    font-weight: 400;
}


.box p{
    font-size: 18px;
    line-height: 36px;
    font-weight: 400;
    width: 300px;
    text-align:center;
    float: left;
    word-break: break-all;
}
<head>
          <link href="https://fonts.googleapis.com/icon?family=Material+Icons"             rel="stylesheet">
      <script src="https://kit.fontawesome.com/a022b2977b.js" crossorigin="anonymous"></script>

</head>
<body>
  <div class="work-container">
                <div class ="box">
                    <div class="i-container">
                        <i class="material-icons" id="Branding">menu_book</i>
                    </div>   
                        <h2>BRANDING</h2>
                        <p>
                        Accusamus et iusto odio dignissimos ducimus 
                        qui blanditiis praesentium voluptatum.
                        </p>
                
                </div>
                <div class ="box">
                    
                        <i class="fa-solid fa-desktop" style="font-size: 85px;"></i>
                  
                        <h2>DESKTOP</h2>
                    <p>
                    Accusamus et iusto odio dignissimos ducimus 
                    qui blanditiis praesentium voluptatum.
                    </p>
                </div>
                <div class ="box">
                    
                    <i class="fa-solid fa-mobile-screen" style="font-size: 85px;"></i>
                    <h2>MOBILE</h2>
                    <p>
                    Accusamus et iusto odio dignissimos ducimus 
                    qui blanditiis praesentium voluptatum.
                    </p>
                </div>
            </div>
</body>
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
0
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Один из способов выровнять объекты — поместить их в сетку.

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

Удаление всего использования единиц px для позиционирования (полей) и вместо этого предоставление системе возможности решать задачи также делает все более отзывчивым.

Дополнение здесь заключалось в том, чтобы удалить фиксированный with всего этого (но, конечно, вернуть его, если это необходимо для вашего варианта использования!) И сделать общий изгиб с зазором, чтобы он был более отзывчивым.

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://kit.fontawesome.com/a022b2977b.js" crossorigin="anonymous"></script>
  <style>
    .work-container {
      width: 100vw;
      border: 1px solid green;
      display: flex;
      gap: 2vw;
    }
    
    .box {
      border: 1px solid #c59a6d;
      height: 430px;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 3fr 1fr 5fr;
    }
    
    .box>* {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .box>p {
      align-items: start;
      justify-content: left;
    }
    
    .box i {
      width: 100%;
    }
    
    .i-container {
      display: flex;
      justify-content: center;
      text-align: center;
    }
    
    .i-container i {
      font-size: 120px;
    }
    
    .box h2 {
      font-size: 20px;
      line-height: 36px;
      font-weight: 400;
    }
    
    .box p {
      font-size: 18px;
      line-height: 36px;
      font-weight: 400;
      word-break: break-all;
    }
    
    i.fa-solid,
    .i-container {
      height: 100%;
    }
  </style>

</head>

<body>
  <div class="work-container">
    <div class="box">
      <div class="i-container">
        <i class="material-icons" id="Branding">menu_book</i>
      </div>
      <h2>BRANDING</h2>
      <p>
        Accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.
      </p>

    </div>
    <div class="box">

      <i class="fa-solid fa-desktop" style="font-size: 85px;"></i>

      <h2>DESKTOP</h2>
      <p>
        Accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.
      </p>
    </div>
    <div class="box">

      <i class="fa-solid fa-mobile-screen" style="font-size: 85px;"></i>
      <h2>MOBILE</h2>
      <p>
        Accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.
      </p>
    </div>
  </div>
</body>

Вы можете изменить пропорции сетки (в настоящее время 3fr, 1fr, 5fr), чтобы дать значку или тексту больше или меньше места.

Другие вопросы по теме