Why transform: rotate() does not work on the symbol?

https://jsfiddle.net/pzawLfgz/243/

Friends, help! Why doesn't the transform property on the symbol?
June 3rd 19 at 19:11
1 answer
June 3rd 19 at 19:13
Solution
Define the symbol display, for example:
display: inline-block;
Thank you! - Hilario44 commented on June 3rd 19 at 19:16
Tell me, how to insert the same symbol, but in .png format?

Trying to do in CSS background: url ('...');
but nothing comes out - he's just not shown - Hilario44 commented on June 3rd 19 at 19:19
don't know , show off in the sandbox
vskidku - I think the block has no width / height - and therefore not visible, because in the first case (https://jsfiddle.net/pzawLfgz/243/ ) - the unit is stretched because of content, but now I understand content no only background picture - Madge.Stroman81 commented on June 3rd 19 at 19:22
I don't know how to throw my picture, but it looks like this:

https://jsfiddle.net/pzawLfgz/253/ - Hilario44 commented on June 3rd 19 at 19:25
Define the symbol display, for example:
display: inline-block; - Madge.Stroman81 commented on June 3rd 19 at 19:28
not help:
https://jsfiddle.net/pzawLfgz/255/

although! if bg-color is done, he fills it to me, but the character itself - no - Hilario44 commented on June 3rd 19 at 19:31
may big picture, define the size and background position
background: url('img/angle_down.png') no-repeat center/cover; - Madge.Stroman81 commented on June 3rd 19 at 19:34
put a fraction like the letter still does not appear - Hilario44 commented on June 3rd 19 at 19:37
I don't know
perhaps the path to the picture is not correct
perhaps the browser doesn't apply the style (for example, error in the writing)
perhaps I do not understand and suggest you don't need the nonsense
A lot of "maybe something else"
Without the sandbox error I won't be able to help you - Madge.Stroman81 commented on June 3rd 19 at 19:40
, https://yadi.sk/d/eVaSFzMO3ZRjC9

Please help to understand! - Hilario44 commented on June 3rd 19 at 19:43
local file path you need to register relative to the file where there is a link to the picture (if it work without server)
In your case, something like this:
background:url('../img/angle_down_1.png') no-repeat center; - Madge.Stroman81 commented on June 3rd 19 at 19:46
, thank you so much! - Hilario44 commented on June 3rd 19 at 19:49
happy to help, we've all been there - Madge.Stroman81 commented on June 3rd 19 at 19:52
and there is still a question. despite the fact that this area stood as it should, when you zoom in on the page, it becomes blurry. While on the same Toaster, it always remains clear. How can oeto correct? - Hilario44 commented on June 3rd 19 at 19:55
on the toaster is a vector image (svg)
<svg id="icon_arrow_down" width="100%" height="100%">
 <path class="path1" d="M51.19 6.401 l-6.397-6.401-19.198 19.198-19.194-19.198-6.401 6.401 25.599 25.599 6.401-6.397-0.004-0.004 z"/>
</svg>
- Madge.Stroman81 commented on June 3rd 19 at 19:58
, Elki-Palki)) as I understand it, its as simple as PNG a file to attach) - Hilario44 commented on June 3rd 19 at 20:01
so, in the img folder, create an empty text file.
copy the code vector (for example the arrow from the toaster)
<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 51 32" enable-background="new 0 0 32 51">
 <path style="fill: black" d="M51.19 6.401 l-6.397-6.401-19.198 19.198-19.194-19.198-6.401 6.401 25.599 25.599 6.401-6.397-0.004-0.004 z"/>
</svg>

rename this file in "array.svg" (any name with svg extension)
and the styles update the link to the image
../img/array.svg - Madge.Stroman81 commented on June 3rd 19 at 20:04
Thank you!
But, as I understand it, change the color anymore? - Hilario44 commented on June 3rd 19 at 20:07
can the svg directly in the layout to insert and styles to change the color
here you can see example How to collect images in the project? - Madge.Stroman81 commented on June 3rd 19 at 20:10
Hello! So?

https://jsfiddle.net/y3btkm6c/10/ - Hilario44 commented on June 3rd 19 at 20:13
Yes it is possible and so, and so it is possible to change the colour:
https://jsfiddle.net/2uzd7q9k/ - Madge.Stroman81 commented on June 3rd 19 at 20:16
and why, despite the fact that I swgcw put in the link when navedenie the link, hover only change the link, but the SVG does not change? and how to fix it?
Thank you - Hilario44 commented on June 3rd 19 at 20:19
that means not changing? if you do not change color, it is necessary on hover the link to change the color of icons.
a:hover {
 color: red; /* text Color of links */
}
a:hover svg {
 fill: red; /* fill Color icon */
}

in General, read about html tags, css selectors, and immediately eliminate the majority of issues - Madge.Stroman81 commented on June 3rd 19 at 20:22
I have almost all the selectors you know, just with SVG was not the case and somehow didn't even think that SVG can hover light up)
I just looked on one site, so there is SVG used as a background of after links, so there for hovera is a separate background.
So I thought that all not so is simple, as usual, and, as I understand it, it's the fill background

But in any case, asking questions and getting them on the Board, I'm learning a lot faster - Hilario44 commented on June 3rd 19 at 20:25

Find more questions by tags CSSHTML