Какой HTML тэг для "иконки" меню использовать правильней? И какое у этой иконки должно быть расширение?

Question

Какой ХТМЛ тэг лучше всего использовать для элемента "лупа" и элемента "телефон"?

И как правильно называются эти элементы? Иконка, значок, эмблема, изображение, штучка? И мне никак не удается разобраться какое расширение использовать для таких элементов? ДжиПег, ПНГ или СВГ? Не могли бы вы мне в объяснить что к чему, и почему по-вашему правильно делать именно так. Спасибо, за то, что уделили мне ваше время.

Answer 1

Лучше конечно использовать svg так как данный формат хорошо масштабитруется и мало весит. Svg вы можете разместить например в тег div нет никаких проблем.

Иногда бывают проблемы с размещением svg файлов многие незнают как их правильно разместить. Вы можете например скачать файл phone.svg и вызвать данный файл при помощи тега img

 <img class="svg" src="phone.svg" />

Но при таком подходе вы не сможете изменять цвет изображения. Так как в svg еще можно менять цвет изображения. В таком случае вы можете например использовать js код который трансформировал бы тег img в тег svg. Вот этот код вы можете использовать для этих целей

jQuery('.svg').each(function(){
    var $img = jQuery(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    jQuery.get(imgURL, function(data) {
        // получить тег svg
        var $svg = jQuery(data).find('svg');

        // Добавить все ID которые были в теги img в svg
        if(typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
        }
        // Добавить все классы которые были в теги img в svg
        if(typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass+' replaced-svg');
        }

        // Удалить все ненужные xml теги
        $svg = $svg.removeAttr('xmlns:a');

        // Заменить img на svg
        $img.replaceWith($svg);

    }, 'xml');

});

Но если вы сомневаетесь что выбрать, я могу порекомендовать вам готовые сборки иконок например https://icons8.com/line-awesome или https://fontawesome.com/

Answer 2

Используйте svg. Они легко масштабируются/изменяются. Большинство иконок можно скачать в svg и разместить у себя в HTML коде как в примере.

https://developer.mozilla.org/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/svg

БЛОГ НА HUSL

Какой HTML тэг для "иконки" меню использовать правильней? И какое у этой иконки должно быть расширение?

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