HTML - تحديد لون الإيموجي

طريقة تحديد درجة لون الإيموجي

هناك جزء كبير من رموز الإيموجي يمكن عرضها بدرجات ألوان مختلفة وهذه الدرجات تسمى Skin Tones. بشكل عام، الإيموجي يمكن عرضه بدرجات ألوان مختلفة نحددها من خلال إضافته كود اللون مباشرةً من بعد كود الإيموجي.

الأكواد التالية نستخدمها خصيصاً لتحديد درجات ألوان الإيموجي:

🏻 الكود 🏻 يعرض الإيموجي بلون داكن.
🏼 الكود 🏼 يعرض الإيموجي بلون داكن متوسط.
🏽 الكود 🏽 يعرض الإيموجي بلون متوسط.
🏾 الكود 🏾 يعرض الإيموجي بلون فاتح متوسط.
🏿 الكود 🏿 يعرض الإيموجي بلون فاتح.

رسومات الإيموجي قد لا تظهر بنفس الشكل في جميع المتصفحات، أو قد يكون الإيموجي معروف بالنسبة لها ولكن درجات ألوانه غير مجهزة فيه. لذلك في حال وجدت أن المتصفح يعرض إيموجي وبجانبه رمز درجة اللون بدل عرض الإيموجي نفسه بشكل ملون فاعلم أن درجة لون الإيموجي ليست معروفة بالنسبة للمتصفح الذي تستخدمه.

أمثلة على رموز الإيموجي

📋

المثال الأول:

<!DOCTYPE html>
<html>
    <head>
		<!-- ليظهر بشكل أوضح CSS يواسطة كود p هنا قمنا بتغيير نوع و حجم خط الوسم -->
        <style>
            p span { font-family: Helvetica, Arial, Sans-Serif; font-size: 30px; }
        </style>
    </head>
    <body>
        <!-- ☝ الرمز التالي سيتم عرضه هكذا --> 
        <p><span>&#9757;</span> No skin</p>
        <!-- ☝🏿 الرمز التالي سيتم عرضه هكذا --> 
        <p><span>&#9757;&#127999;</span> Dark</p>
        <!-- ☝🏾 الرمز التالي سيتم عرضه هكذا --> 
        <p><span>&#9757;&#127998;</span> Medium Dark</p>
        <!-- ☝🏽 الرمز التالي سيتم عرضه هكذا --> 
        <p><span>&#9757;&#127997;</span> Medium</p>
        <!-- ☝🏼 الرمز التالي سيتم عرضه هكذا --> 
        <p><span>&#9757;&#127996;</span> Medium Light</p>
        <!-- ☝🏻 الرمز التالي سيتم عرضه هكذا --> 
        <p><span>&#9757;&#127995;</span> Light</p>
    </body>
</html>

📋

المثال الثاني:

<!DOCTYPE html>
<html>
    <head>
		<!-- ليظهر بشكل أوضح CSS يواسطة كود p هنا قمنا بتغيير نوع و حجم خط الوسم -->
        <style>
            p span { font-family: Helvetica, Arial, Sans-Serif; font-size: 30px; }
        </style>
    </head>
    <body>
        <!-- 🏊 الرمز التالي سيتم عرضه هكذا --> 
        <p><span>&#127946;</span> No skin</p>
        <!-- 🏊🏿 الرمز التالي سيتم عرضه هكذا --> 
        <p><span>&#127946;&#127999;</span> Dark</p>
        <!-- 🏊🏾 الرمز التالي سيتم عرضه هكذا --> 
        <p><span>&#127946;&#127998;</span> Medium Dark</p>
        <!-- 🏊🏽 الرمز التالي سيتم عرضه هكذا --> 
        <p><span>&#127946;&#127997;</span> Medium</p>
        <!-- 🏊🏼 الرمز التالي سيتم عرضه هكذا --> 
        <p><span>&#127946;&#127996;</span> Medium Light</p>
        <!-- 🏊🏻 الرمز التالي سيتم عرضه هكذا --> 
        <p><span>&#127946;&#127995;</span> Light</p>
    </body>
</html>

📋

المثال الثالث:

&#9994; (Raised Fist) - &#9994; أو ✊
&#9994; (✊🏿) - داكن &#127999;
&#9994; (✊🏾) - داكن متوسط &#127998;
&#9994; (✊🏽) - متوسط &#127997;
&#9994; (✊🏼) - فاتح متوسط &#127996;
&#9994; (✊🏻) - فاتح &#127995;

جدول رموز الإيموجي

الإيموجي	رمزه	داكن	داكن متوسط	متوسط	فاتح متوسط	فاتح
☝	☝	☝🏿	☝🏾	☝🏽	☝🏼	☝🏻
⛹	⛹	⛹🏿	⛹🏾	⛹🏽	⛹🏼	⛹🏻
✊	✊	✊🏿	✊🏾	✊🏽	✊🏼	✊🏻
✋	✋	✋🏿	✋🏾	✋🏽	✋🏼	✋🏻
✌	✌	✌🏿	✌🏾	✌🏽	✌🏼	✌🏻
✍	✍	✍🏿	✍🏾	✍🏽	✍🏼	✍🏻
🎅	🎅	🎅🏿	🎅🏾	🎅🏽	🎅🏼	🎅🏻
🏂	🏂	🏂🏿	🏂🏾	🏂🏽	🏂🏼	🏂🏻
🏃	🏃	🏃🏿	🏃🏾	🏃🏽	🏃🏼	🏃🏻
🏄	🏄	🏄🏿	🏄🏾	🏄🏽	🏄🏼	🏄🏻
🏇	🏇	🏇🏿	🏇🏾	🏇🏽	🏇🏼	🏇🏻
🏊	🏊	🏊🏿	🏊🏾	🏊🏽	🏊🏼	🏊🏻
🏋	🏋	🏋🏿	🏋🏾	🏋🏽	🏋🏼	🏋🏻
🏌	🏌	🏌🏿	🏌🏾	🏌🏽	🏌🏼	🏌🏻
👂	👂	👂🏿	👂🏾	👂🏽	👂🏼	👂🏻
👃	👃	👃🏿	👃🏾	👃🏽	👃🏼	👃🏻
👆	👆	👆🏿	👆🏾	👆🏽	👆🏼	👆🏻
👇	👇	👇🏿	👇🏾	👇🏽	👇🏼	👇🏻
👈	👈	👈🏿	👈🏾	👈🏽	👈🏼	👈🏻
👉	👉	👉🏿	👉🏾	👉🏽	👉🏼	👉🏻
👊	👊	👊🏿	👊🏾	👊🏽	👊🏼	👊🏻
👋	👋	👋🏿	👋🏾	👋🏽	👋🏼	👋🏻
👌	👌	👌🏿	👌🏾	👌🏽	👌🏼	👌🏻
👍	👍	👍🏿	👍🏾	👍🏽	👍🏼	👍🏻
👎	👎	👎🏿	👎🏾	👎🏽	👎🏼	👎🏻
👏	👏	👏🏿	👏🏾	👏🏽	👏🏼	👏🏻
👐	👐	👐🏿	👐🏾	👐🏽	👐🏼	👐🏻

آخر الأخبار

HTML / رموز الإيموجي

JS / الكلاس

JS / البرمجة الكائنية

HTML / الرموز المطبعية

HTML / الروابط

إنشاء موقعك الإلكتروني أنيق ومخصص للجيم والرياضه الحديد HTML وCSS وJavaScript

HTML / تحديد لون الإيموجي