Почему transform: rotate() не работает на символе?

Question

[usedtoknow]

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

Друзья, помогите! Почему не работает свойство transform на символ?

Answer 1

[ⓒⓢⓢ]

Определите отображение символа, например:
display: inline-block;

Comments

[usedtoknow]

Спасибо!

[usedtoknow]

Скажите, а как вставить такой же символ, но в .png формате?

Пытаюсь сделать в CSS background: url ('...');
но ничего не выходит - он просто не показывается

[ⓒⓢⓢ]

usedtoknow, не знаю, покажите в песочнице
на вскидку - то думаю у блока нет ширины\высоты - поэтому и не видно, т.к. в первом случае (https://jsfiddle.net/pzawLfgz/243/ ) - блок растягивался из-за контента, а сейчас я так понимаю контента нет - только фоновая картинка

[usedtoknow]

я не знаю, как скинуть именно мою картинку, но выглядит вот так:

https://jsfiddle.net/pzawLfgz/253/

[ⓒⓢⓢ]

usedtoknow, Определите отображение символа, например:
display: inline-block;

[usedtoknow]

JRK_DV, не помогает:
https://jsfiddle.net/pzawLfgz/255/

хотя! если bg-color сделать, то он мне его заливает, но сам символ - нет

[ⓒⓢⓢ]

usedtoknow, возможно картинка большая, определите размеры фона и позицию
background: url('img/angle_down.png') no-repeat center/cover;

[usedtoknow]

JRK_DV, поставил в разы меньше, как буква, все равно не отображается

[ⓒⓢⓢ]

usedtoknow, я не знаю
возможно путь до картинки не правильный
возможно браузер не применяет стиль (например, ошибка в написании)
возможно я вас не понимаю и советую не нужную чушь
Много "возможно ещё что-то"
Без песочницы с ошибкой я не смогу вам помочь

[usedtoknow]

JRK_DV, https://yadi.sk/d/eVaSFzMO3ZRjC9

Прошу помочь разобраться!

[ⓒⓢⓢ]

usedtoknow, локальные файловые пути нужно прописывать относительно файла где идёт ссылка на картинку (это если работа без сервера)
В вашем случае, как то так:
background:url('../img/angle_down_1.png') no-repeat center;

[usedtoknow]

JRK_DV, огромное спасибо!

[ⓒⓢⓢ]

usedtoknow, рад помочь, все через такое проходили

[usedtoknow]

JRK_DV, а есть еще вопрос. несмотря на то, что этот уголок встал как надо, при увеличении масштаба страницы, он становится расплывчатым. Тогда как на том же Тостере, он всегда остается четким. Как можн оэто исправитЬ?

[ⓒⓢⓢ]

usedtoknow, на тостере используется векторное изображение (svg)

<svg id="icon_arrow_down" width="100%" height="100%">
  <path class="path1" d="M51.19 6.401l-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.004z"></path>
</svg>

[usedtoknow]

JRK_DV, елки-палки)) как я понимаю, его так просто, как пнг файл уже не прицепить)

[ⓒⓢⓢ]

usedtoknow, да так же, в папке img создаёшь пустой текстовый файл.
копируешь в него код вектора (например стрелка с тостера)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 51 32" enable-background="new 0 0 51 32">
  <path style="fill: black" d="M51.19 6.401l-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.004z"></path>
</svg>

переименовываешь этот файл в "array.svg" (любое имя с svg расширением)
и в стилях обновляешь ссылку на изображение
../img/array.svg

[usedtoknow]

JRK_DV, Спасибо!
Но, как я понял, поменять цвет уже нельзя?

[ⓒⓢⓢ]

usedtoknow, можно svg прямо в вёрстку вставить и стилями менять цвет
тут пример можно посмотреть Как грамотно собрать картинки в проекте?

[usedtoknow]

JRK_DV, привет! Вот так?

https://jsfiddle.net/y3btkm6c/10/

[ⓒⓢⓢ]

usedtoknow, да можно и так, а так можно цвет поменять:
https://jsfiddle.net/2uzd7q9k/

[usedtoknow]

JRK_DV, а почему, несмотря на то, что я свгшку вставил в ссылку, при наведениее на ссылку, ховером меняется только ссылка, но сам свг не меняется? и как это исправить?
Спасибо

[ⓒⓢⓢ]

usedtoknow, что значит не меняется? если не меняется цвет, то надо при ховере на ссылку менять и цвет у иконки.

a:hover {
 color: red; /* Цвет текста ссылки */
}
a:hover svg {
  fill: red; /* Цвет заливки иконки */
}

а вообще почитайте про теги html, css селекторы и сразу отпадут большинство вопросов

[usedtoknow]

JRK_DV, я практически все селекторы знаю, просто с свг дела не имел и как-то даже не подумал, что свг можно ховером засветить)
я просто посмотрел на одном сайте, так там свг используется как бэкграунд афтера ссылки, так вот там для ховера идет отдельный бэкграунд.
Вот я и подумал, что все не так просто, как обычно, а, как я понимаю, это особенности заливки бэкграундом

Но в любом случае, спрашивая вопросы и получая на них овет, я учусь намного быстрее