Email or username:

Password:

Forgot your password?
Мя's posts Post Back to profile
Мя :sparkles_lesbian:

Казалось бы, простая задача, перед ссылку нарисовать фавиконку (с заранее известным URL картинки)

Но нет, CSS заставит ЗАЕБАТЬСЯ

26 October at 21:11 | Open on mastodon.ml
8 comments
Мя :sparkles_lesbian:

Я знаю что есть ответы на стаковерфлоу, но мне крайне не нравится хардкод высоты в пикселях
Я хочу чтобы он увеличивался согласовано с текстом

26 October at 21:13 | Open on mastodon.ml
:blobcatlaptop: gravitos :blobcatcomfsip:​

@mo перепост из телеги, потому что кому-то это может понадобиться

можно так
26 October at 23:23 | Open on wetdry.world
:blobcatlaptop: gravitos :blobcatcomfsip:​

@mo

<!DOCTYPE html>
<html>
<head>
<title>style</title>
<style>
h1 {
    font-family: "Comfortaa";
}

.favicon:before {
    content: 'm';
    color: transparent;
    background-image: url("./pic.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

</style>
<meta name="generator" content="md2html">
<meta charset="UTF-8">
</head>
<body>
<h1>hi</h1>
<p>this is a <a class="favicon" href="https://wetdry.world/">link</a></p>
<h1>this is a <a class="favicon" href="https://wetdry.world/">bigger link</a></h1>
<img src="pic.png"> this is just a png
</body>
</html>

@mo

<!DOCTYPE html>
<html>
<head>
<title>style</title>
<style>
h1 {
    font-family: "Comfortaa";
}

.favicon:before {
    content: 'm';
    color: transparent;
    background-image: url("./pic.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

</style>
<meta name="generator" content="md2html">
<meta charset="UTF-8">
</head>
<body>
<h1>hi</h1>
<p>this is a <a class="favicon" href="https://wetdry.world/">link</a></p>
<h1>this is a <a class="favicon" href="https://wetdry.world/">bigger link</a></h1>
26 October at 23:23 | Open on wetdry.world
Винт Прокс

@mo Единицы в `em` не подходят?

27 October at 5:32 | Open on mastodon.ml
Мя :sparkles_lesbian:

@vint мем в том, что width и height не работают, потому что сам элемент <a> — display: inline
А если сменить на inline-block, фон появляется, но начинает вести себя ебонуто

27 October at 9:36 | Open on mastodon.ml
Винт Прокс

@mo А, ну фон "ёбнутый" у ссылки с inline-block в том плане, что она не разбивается на следующую строку, или там что-то другое не устраивает?

27 October at 9:51 | Open on mastodon.ml
Мя :sparkles_lesbian:

@vint нет, в плане картинка не влезает в отведеное ей место и видно только кусок

27 October at 10:27 | Open on mastodon.ml
Винт Прокс

@mo Я не уверен, что происходит. inline-flex?

27 October at 10:29 | Open on mastodon.ml
Go Up