Ankhena

Нет, конечно.
Это делается одним элементом.
Фон и скругления задаются в CSS

.icon {
display: block; /*или другой по обстоятельствам*/
width: 30px;
height: 30px;
border-radius: 10px;
background-color: blue; /*цвет фона*/
background-image: url(путь к картинке);
background-position: center;
background-repeat: no-repeat;
background-size: нужный-размер;
}

Если картинке нужно менять цвет при разных состояниях, то её вставляют как инлайн SVG (желательно спрайтом).

1. SVG
2. conical gradient, но на данный момент нет поддержке в не вебкитах.
3. 2 псевдоэлемента. На одном дуга в четверть круга, второй перекрывает честь этой дуги.

Мне больше всего нравится последний вариант.
https://jsfiddle.net/zquwg2sy/

Так https://jsfiddle.net/tg3nqoef/

Я вам еще вчера написала ответ в комментариях.

Проверяйте тут не 100%

Либо неправильно написаны селекторы.
Покажете код в песочнице или ссылку на сайт, станет понятнее.

Разберитесь с селекторами.
Да и с семантикой тоже.

Вложенные селекторы:
a:hover span {красный}
Применит стили ко всем span, которые находятся внутри ссылки, когда на нее навели мышкой.

Итого:
.menu-link:hover .icon {меняйте что хотите}

Вот так, без лишних спанов и дивов для стрелок: https://jsfiddle.net/6k8qf35y/

Вероятно в том, что для работы внешних спрайтов в некоторых браузерах нужен сервер, хотя бы локлхост.
Либо забыли файлик svgxuse

Не переопределяйте свойства, которые не изменяются.
Зачем вы задаете флекс 2 раза (боюсь даже, что не 2), если блок как был флексовым, так и остался? С остальными свойствами аналогично.
Т.е. в примере со скрина вторая группа медиа вообще не нужна, потому что не поменялось вообще ничего.

Вспомните неравенства в школе. Тут тоже самое.
Ширина окна 300 попадает в оба условия. Соответственно, и стили применяются и те и те.
Браузер как будто бы игнорирует скобки медиа и высчитывает специфичность как обычно.

Почему тогда я могу спокойно передвинуть label? И textarea, и label находятся внутри одного элемента и оба являются строчными. В чем тогда разница?

Разница в том, что у label есть куда выравниваться в рамках строки, а у textarea нету, потому что именно он определяет высоту этой строки.
Разобраться вам поможет вот эта статья https://web-standards.ru/articles/vertical-align/

transform skew, border-radius, градиент и z-index -1 для псевдоэлемента.
Как-то так https://jsfiddle.net/mwp2efx0/

Проще всего: https://jsfiddle.net/58qdn06e/
Если объясните зачем там нужен псевдо - обсудим.

Фильтрами https://developer.mozilla.org/ru/docs/Web/CSS/filter

У вас

.blog-action .blog_inner .item {
    width: 41%;
}

а в медиа
.blog .item

Специфичность в первом случае выше и они перебивают всё остальное.

Почитайте про нейминг БЭМ.
Избегайте вложенности селекторов (больше 2 требуется очень редко, а БЭМ и вовсе без вложенности).

swiper

1 4 5 8 9 12 и тд

div:nth-child(4n), div:nth-child(4n+1)

2 3 6 7 10 11 и тд

Эти вообще можно не задавать. Сначала покрасить все и потом переопределить только нужные.
https://jsfiddle.net/ocv6035p/

Так:
https://jsfiddle.net/ge2vq61u/

Чтобы граница была четкая, числа в точках перехода должны быть одинаковыми.
https://jsfiddle.net/dtw958ha/

<header class="header">
  <h1>LeoImage</h1>
</header>

body {
  margin: 0;
}

.header {
  background: linear-gradient(to bottom, transparent 45%, deepskyblue 55%);
}
h1 {
  max-width: 500px;
  margin: auto;
}

https://jsfiddle.net/v7fbmj2o/

Сменить display на block по крайней мере для td.

td {
  display: block;
}
@media (min-width: 768px) {
  td {
    display: initial;
  }
}