[Résolu] Emoji unicode

Bonjour
J'ai vu que le nombre d'emoj intégrés dans https://www.unicode.org/emoji/charts-16.0/emoji-list.html est important
Je souhaiterai l'intégrer comme une petit image ~200px mais je ne sais pas si c'est possible. 1/ 1/ Est-ce qu'elle a une taille fixe? ou vectoriel ?
2/ Est-ce qu'l y a des inconvénients / problème à prendre en compte pour l’utiliser sur un site web à la place d'autres petites images ?
3/ si meilleur solution, quelle st-elle pour ne pas pas utiliser un format d'image?

salut
tu donne la taille que tu veux aux caracteres uncode avec font-size
c'est plus léger qu'une image à charger
Modifié par drphilgood (30 Sep 2024 - 14:10)

Salut
oui je veux une alternative aux images mais quand même quelque chose d'assez grand :
200px X 200px max

https://jsfiddle.net/L8a9zazh/15/
Plus simple :
https://jsfiddle.net/L8a9zazh/5/
Ultra simple :

<p>&#x1F601; </p>

p {
  font-size: 24px;
  vertical-align: middle; //S'il y a du texte avec.
}

Pour ce dernier exemple, tu peux mettre le html dans une div avec une class, de façon à ne pas modifier tous les <p> du texte de la page. Ou un span.

Bonjour
Merci j'ai bien avancé mais je n'arrive pas à finaliser car j'essaie de l'intégrer en remplaçant l'image par l’icône. J'essaie d'adapter le code mais il y a plusieurs contraintes car c'est un popup un peu spécial
A la fin, j'aurai besoin que le tout soit décalé vers la droite et redescende un peu pour rester toujours parfaitement dans le conteneur quel que soit l’écran bien sûr (et si possible sans javascript)

https://jtest-ext.88h.ovh/index.php?option=com_content&view=article&id=15:art-avec-img-webp&catid=9&Itemid=101

<div class="eb-columns-container columns-2">
<div id="icone">????</div>
<div class="eb-column">
<p><span class="fw-bold">Et si vous nous aidiez à grandir ?</span></p>
Et rendre plus visible<br>les ressources documentaires 
<p><span class="fw-bold">à partir de ce site<br><strong>Gros projet d'insérer plusieurs milliers de livres</strong> d'ici l'été. <br>Besoin d'au moins 2 000€ !<br></span></p>
<span class="fw-bold"><a href="pourquoi-faire-un-don">Faites un don dès maintenant</a></span></div>
</div>

div #icone {
  font-size: 6rem;
}

.eb-{eb.id} {
	font-size: 16px;
}

.eb-{eb.id} .eb-dialog {
    background-image: url(https://templates.tassos.gr/images/engagebox/templates-assets/Sales/abstract-shape-bg.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.eb-{eb.id} .eb-container {
	width: 100%;
}

.eb-{eb.id} .eb-container img {
	margin: 0 auto;
    display: block;
    max-height: 270px;
}

.eb-{eb.id} .eb-columns-container .eb-column:nth-of-type(1) {
	flex-basis: 40%;
}

.eb-{eb.id} .eb-columns-container .eb-column:nth-of-type(2) {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.eb-{eb.id} .eb-mast-head {
	font-weight: 700;
	font-size: 10px;
	line-height: 12px;
}

.eb-{eb.id} .eb-title {
	margin-top: 0;
	font-weight: 700;
	font-size: 40px;
	line-height: 47px;
	color: #FE512B;
	margin-bottom: 16px;
}

.eb-{eb.id} .eb-description {
	color: #212121;
	margin-bottom: 22px;
}

.eb-{eb.id} .eb-btn {
	display: inline-block;
	padding: 16.5px 50px;
	color: #fff;
	background: #FE512B;
	border-radius: 39px;
        text-decoration: none;
}

.eb-{eb.id} .eb-close {
	width: 35px;
	height: 35px;
	background: #FE512B;
	border-radius: 50%;
}

@media only screen and (max-width: 991px) {
	.eb-{eb.id} .eb-dialog,
	.eb-{eb.id} .eb-content {
		overflow: initial;
	}

	.eb-{eb.id} .eb-close {
		top: -45px;
	}
	
	.eb-{eb.id} .eb-dialog {
		background: #fff;
		box-shadow: 0px 11px 15px -7px rgba(0,0,0,.2), 0px 24px 38px 3px rgba(0,0,0,.1), 0px 9px 46px 8px rgba(0,0,0,.1);
		height: auto !important;
		padding: 24px !important;
	}

	.eb-{eb.id} .eb-columns-container {
		gap: 8px;
	}
}

@media only screen and (max-width: 576px) {
	.eb-{eb.id} img {
		display: none;
	}

	.eb-{eb.id} .eb-title {
		font-size: 30px;
	}

	.eb-{eb.id} .eb-columns-container .eb-column:nth-of-type(2) {
		align-items: center;
	}
}