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

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

طريقة عرض رموز الإيموجي

رموز الإيموجي (Emoji) عبارة عن مجموعة أحرف إن تم وضعها مع بعضها يقوم المتصفح بعرض رمز إيموجي محدد مكانها. هذه الأحرف مهمة جداً فهي تتيح لك إمكانية عرض أي رمز تريد في الصفحة حتى و إن كان غير موجوداً على الكيبورد الذي تستخدمه.

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


الأحرف التي نستخدمها لعرض الرموز يمكن وضعها بأسلوب عشري (Decimal) أو بأسلوب سداسي عشري (Hexadecimal).

قاعدة عامة

عند استخدام الأسلوب Decimal يجب إضافة &# قبل وضع أحرف الرمز.

عند استخدام الأسلوب Hexadecimal يجب إضافة &#x قبل وضع أحرف الرمز.

كما أنه يفضّل دائماً وضع فاصلة منقوطة ; بعد كتابة أحرف الرمز و هذا أمر اختياري و لكننا ننصح بفعله.

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

📋

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

<!DOCTYPE html>
<html>
    <head>
		<!-- ليظهر بشكل أوضح CSS يواسطة كود p هنا قمنا بتغيير نوع و حجم خط الوسم -->
        <style>
            p { font-family: Helvetica, Arial, Sans-Serif; font-size: 26px; }
        </style>
    </head>
    <body>
        <!-- ⏩ :الرموز التالية جميعها سيتم عرضها هكذا --> 
        <p>&#9193;</p>
        <p>&#x23E9;</p>
    </body>
</html>        
📋

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

<!DOCTYPE html>
<html>
    <head>
		<!-- ليظهر بشكل أوضح CSS يواسطة كود p هنا قمنا بتغيير نوع و حجم خط الوسم -->
        <style>
            p { font-family: Helvetica, Arial, Sans-Serif; font-size: 26px; }
        </style>
    </head>
    <body>
        <!-- ♒ :الرموز التالية جميعها سيتم عرضها هكذا --> 
        <p>&#9810;</p>
        <p>&#x2652;</p>
    </body>
</html>
        
📋

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

<!DOCTYPE html>
<html>
    <head>
		<!-- ليظهر بشكل أوضح CSS يواسطة كود p هنا قمنا بتغيير نوع و حجم خط الوسم -->
        <style>
            p { font-family: Helvetica, Arial, Sans-Serif; font-size: 26px; }
        </style>
    </head>
    <body>
        <!-- 🍓 :الرموز التالية جميعها سيتم عرضها هكذا --> 
        <p>&#127827;</p>
        <p>&#x1F353;</p>
    </body>
</html>        

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

الرمز Decimal Hexadecimal الإسم
&#8986; &#x231A; Watch
&#8987; &#x231B; Hourglass Done
&#9193; &#x23E9; Fast-Forward Button
&#9194; &#x23EA; Fast Reverse Button
&#9195; &#x23EB; Fast Up Button
&#9196; &#x23EC; Fast Down Button
&#9197; &#x23ED; Next Track Button
&#9198; &#x23EE; Last Track Button
&#9199; &#x23EF; Play or Pause Button
&#9200; &#x23F0; Alarm Clock
&#9201; &#x23F1; Stopwatch
&#9202; &#x23F2; Timer Clock
&#9203; &#x23F3; Hourglass Not Done
&#9208; &#x23F8; Pause Button
&#9209; &#x23F9; Stop Button
&#9210; &#x23FA; Record Button
&#9410; &#x24C2; Circled M
&#9748; &#x2614; Umbrella with Rain Drops
&#9749; &#x2615; Hot Beverage
&#9757; &#x261D; Index Pointing Up
&#9800; &#x2648; Aries
&#9801; &#x2649; Taurus
&#9802; &#x264A; Gemini
&#9803; &#x264B; Cancer
&#9804; &#x264C; Leo
&#9805; &#x264D; Virgo
&#9806; &#x264E; Libra
&#9807; &#x264F; Scorpio
&#9808; &#x2650; Sagittarius
&#9809; &#x2651; Capricorn
&#9810; &#x2652; Aquarius
&#9811; &#x2653; Pisces
&#9823; &#x265F; Chess Pawn
&#9855; &#x267F; Wheelchair Symbol
&#9875; &#x2693; Anchor
&#9889; &#x26A1; High Voltage
&#9898; &#x26AA; White Circle
&#9899; &#x26AB; Black Circle
&#9917; &#x26BD; Soccer Ball
&#9918; &#x26BE; Baseball
&#9924; &#x26C4; Snowman Without Snow
&#9925; &#x26C5; Sun Behind Cloud
&#9934; &#x26CE; Ophiuchus
&#9935; &#x26CF; Pick
&#9937; &#x26D1; Rescue Worker’s Helmet
&#9939; &#x26D3; Chains
&#9940; &#x26D4; No Entry
&#9961; &#x26E9; Shinto Shrine
&#9962; &#x26EA; Church
&#9968; &#x26F0; Mountain
&#9969; &#x26F1; Umbrella on Ground
&#9970; &#x26F2; Fountain
&#9971; &#x26F3; Flag in Hole
&#9972; &#x26F4; Ferry
&#9973; &#x26F5; Sailboat
&#9975; &#x26F7; Skier
&#9976; &#x26F8; Ice Skate
&#9977; &#x26F9; Person Bouncing Ball
&#9978; &#x26FA; Tent
&#9981; &#x26FD; Fuel Pump
&#9986; &#x2702; Scissors
&#9989; &#x2705; White Heavy Check Mark
&#9992; &#x2708; Airplane
&#9993; &#x2709; Envelope
&#9994; &#x270A; Raised Fist
&#9995; &#x270B; Raised Hand
&#9996; &#x270C; Victory Hand
&#9997; &#x270D; Writing Hand
&#9999; &#x270F; Pencil
&#10002; &#x2712; Black Nib
&#10004; &#x2714; Heavy Check Mark
&#10006; &#x2716; Heavy Multiplication X
&#10013; &#x271D; Latin Cross
&#10017; &#x2721; Star of David
&#10024; &#x2728; Sparkles
&#10035; &#x2733; Eight-Spoked Asterisk
&#10036; &#x2734; Eight-Pointed Star
&#10052; &#x2744; Snowflake
&#10055; &#x2747; Sparkle
&#10060; &#x274C; Cross Mark
&#10062; &#x274E; Cross Mark Button
&#10067; &#x2753; Question Mark
&#10068; &#x2754; White Question Mark
&#10069; &#x2755; White Exclamation Mark
&#10071; &#x2757; Exclamation Mark
&#10083; &#x2763; Heavy Heart Exclamation
&#10084; &#x2764; Red Heart
&#10133; &#x2795; Heavy Plus Sign

إرسال تعليق

أحدث أقدم

نموذج الاتصال