Home html Which HTML tag for "icons" menu to use correct? And what does...

Which HTML tag for “icons” menu to use correct? And what does this icon have an extension?

Author

Date

Category

Which HTML tag is best used for the element “magnifier” and the “phone” element?


and how are these elements are called correctly? Icon, icon, emblem, image, thing?
And I can’t understand what extension to use for such elements? Jeep, PNG or SVG?
Could you explain to me what to do what, and why do you think correctly do that.
Thank you for giving me your time.


Answer 1

Better of course use SVG as this format is well scaled and weighs little. SVG You can accommodate for example in Div tag there are no problems.

Sometimes there are problems with the location of SVG files, many do not know how to properly place them. You can for example download the phone.svg file and call this file using the IMG

tag

& lt; img class = "svg" src = "phone.svg" / & gt;

But with this approach you will not be able to change the color of the image. Since the color of the image can still be changed in SVG. In this case, you can use the JS code that would transform the IMG tag in the SVG tag. Here is the code you can use for these purposes

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) {
    // Get a SVG tag
    VAR $ SVG = jQuery (Data) .find ('SVG');
    // Add all the IDs that were in the IMG tags in SVG
    If (TypeF Imgid! == 'undefined') {
      $ svg = $ svg.attr ('id', imgid);
    }
    // Add all classes that were in IMG tags in SVG
    If (Typeof Imgclass! == 'undefined') {
      $ svg = $ svg.attr ('Class', ImgClass + 'Replaced-SVG');
    }
    // Delete all unnecessary XML tags
    $ svg = $ svg.removeattr ('XMLNS: A');
    // Replace IMG on SVG
    $ img.replaceWith ($ SVG);
  }, 'xml');
});

But if you doubt what to choose, I can recommend you ready build icons for example https://icons8.com/ Line-awesome or https://fontawesome.com/


Answer 2

Use SVG. They are easily scaled / change. Most icons can be downloaded in SVG and place in HTML code as in the example.

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

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions