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