Как сделать разную ширину и высоту у объектов? Html css

Question

Хочу сделать чтобы в объекте были разные размеры у иконок и цвет. Но когда делаю отдельный класс почему-то ширина и текст не работает. Вот что у меня выходит.

Меня не истраивает размер дискорда и цвет вк и тиктока. Помогите.

.social img {
    display: inline-block;
    width: 33px;
    height: 33px;
    margin-right: 15px;
    position: relative;
    bottom: 62px;
    left: 30px;
}

<div class="social">
            <a href="#"><img src="../Trademine/images/kisspng-computer-icons-discord-logo-discord-icon-5b3371b3e61483.2964463015300980999424.png" alt="DS"></a>
            <a href="#"><img src="../Trademine/images/image-from-rawpixel-id-3344520-png.png" alt="TT" class="social_tt"></a>
            <a href="#"><img src="../Trademine/images/kisspng-russia-social-media-marketing-vkontakte-social-net-vk-logo-png-5ab0b9c1b5a0b1.893566341521531329744.png" alt="VK" class="social_vk"></a>
        </div>

Когда есть 1 элемент, то 2 элемент код просто не видит. Как это исправить?

Answer 1

Чтобы изменить цвет иконки вам нужно изменить цвет на самой картинке, т.к. картинка у вас png формата, находящейся по пути "../Trademine/images/kisspng-russia-social-media-marketing-vkontakte-social-net-vk-logo-png-5ab0b9c1b5a0b1.893566341521531329744.png". Если хотите изменить цвет, то можете зайти на этот сайт и выбрав любую(нажать на неё) и там настроить её самому (Recolor-изменить цвет, overlay-добавить ещё что-нибудь на икону, text-добавить текст на икону), затем нажать "Done" и нажать "Download", выбрать размер и формат иконки(рекомендуется выбрать .svg). После закинуть скачаную иконку на хостинг и указать к ней путь.

Чтобы изменить размер нужно поменять значение width: скольконужнопикселейpx; и тогда не будет смысла от height(поэтому можно его убрать).

Получается так:

.social img {
    display: inline-block;
    width: (скольконужно)px; #вместо (скольконужно) введите кол-во пикселей например: 96
    margin-right: 15px;
    position: relative;
    bottom: 62px;
    left: 30px;
}

Чтобы изменить размер только иконки дискорда, то заменить

<div class="social">
        <a href="#"><img src="../Trademine/images/kisspng-computer-icons-discord-logo-discord-icon-5b3371b3e61483.2964463015300980999424.png" alt="DS"></a>
        <a href="#"><img src="../Trademine/images/image-from-rawpixel-id-3344520-png.png" alt="TT" class="social_tt"></a>
        <a href="#"><img src="../Trademine/images/kisspng-russia-social-media-marketing-vkontakte-social-net-vk-logo-png-5ab0b9c1b5a0b1.893566341521531329744.png" alt="VK" class="social_vk"></a>
    </div>

На вот этот код:

<div class="social">
        <a href="#"><img src="../Trademine/images/kisspng-computer-icons-discord-logo-discord-icon-5b3371b3e61483.2964463015300980999424.png" alt="DS" class="social_ds"></a>
        <a href="#"><img src="../Trademine/images/image-from-rawpixel-id-3344520-png.png" alt="TT" class="social_tt"></a>
        <a href="#"><img src="../Trademine/images/kisspng-russia-social-media-marketing-vkontakte-social-net-vk-logo-png-5ab0b9c1b5a0b1.893566341521531329744.png" alt="VK" class="social_vk"></a>
    </div>

В style вставить этот код:

.social_ds img {
    display: inline-block;
    width: (скольконужно)px; #вместо (скольконужно) введите кол-во пикселей например: 96
    margin-right: 15px;
    position: relative;
    bottom: 62px;
    left: 30px;
}

БЛОГ НА HUSL

Как сделать разную ширину и высоту у объектов? Html css

Ответы (1 шт):