ফর্ম 7 জমা বোতামে যোগাযোগ করতে ফন্ট দুর্দান্ত আইকন কীভাবে যুক্ত করবেন

আপনার যোগাযোগ ফর্মে একটি সাধারণ “Submit” বোতামটি জেনেরিক দেখায়। একটি যোগ করা হচ্ছে আপনার যোগাযোগ ফর্ম 7 জমা বোতামের ভিতরে দুর্দান্ত আইকন ফন্ট করুন এটিকে একটি ভিজ্যুয়াল কিউ দেয় যা মনোযোগ আকর্ষণ করে এবং ক্রিয়াটিকে আরও পরিষ্কার করে। "বার্তা পাঠান" এর পাশে একটি কাগজের সমতল আইকন বা "জমা দিন।" এর পাশে একটি খামের আইকনের কথা ভাবুন

ধরা? যোগাযোগ ফর্ম 7-এ বোতামগুলিতে আইকন যুক্ত করার জন্য একটি অন্তর্নির্মিত বিকল্প নেই। আপনাকে আইকনের ইউনিকোড হেক্স কোডটি সরাসরি CF7 ফর্ম ট্যাগে সন্নিবেশ করতে হবে এবং সঠিক ফন্ট লোড করতে একটি ছোট CSS স্নিপেটের সাথে যুক্ত করতে হবে।

এই টিউটোরিয়ালটি আপনাকে ধাপে ধাপে পুরো প্রক্রিয়ার মধ্য দিয়ে নিয়ে যায়। আপনি একটি যোগ করতে শিখবেন CF7 সাবমিট বোতামে দুর্দান্ত আইকন ফন্ট করুন, ফর্ম ফিল্ড প্লেসহোল্ডারদের মধ্যে আইকন যোগ করুন এবং এলিমেন্টর ব্যবহারকারী এবং নন-এলিমেন্টর সেটআপ উভয়ের জন্য ফন্ট অসাধারণ ফন্ট-ফ্যামিলি সেটআপ পরিচালনা করুন। Font Awesome 5, 6, এবং সর্বশেষ 2026 Elementor সংস্করণের জন্য আপডেট করা হয়েছে।

আপনার যা প্রয়োজন হবে

শুরু করার আগে, নিশ্চিত করুন যে আপনার কাছে এগুলি আছে:

• ওয়ার্ডপ্রেস সঙ্গে যোগাযোগ ফর্ম 7 ইনস্টল এবং সক্রিয়
• অসাধারণ ফন্ট আপনার সাইটে লোড করা হয়েছে (এলিমেন্টর, একটি প্লাগইন বা ম্যানুয়াল CDN এর মাধ্যমে)
• আপনার থিম অ্যাক্সেস কাস্টম সিএসএস প্যানেল (আবির্ভাব > কাস্টমাইজ > অতিরিক্ত CSS)
• আপনার পছন্দসই আইকনের জন্য ইউনিকোড হেক্স কোড (এটি কোথায় পাবেন তা আমরা আপনাকে দেখাব)

সময় প্রয়োজন: 5-10 মিনিট

দক্ষতার স্তর: শিক্ষানবিস (কোন কোডিং অভিজ্ঞতার প্রয়োজন নেই, শুধু কপি এবং পেস্ট করুন)

ধাপ 1: আপনার সাইটে দুর্দান্ত ফন্ট সক্ষম করুন

কোনো আইকন রেন্ডার হওয়ার আগে আপনার সাইটের ফন্ট অসাধারণ লোড করা প্রয়োজন। আপনি এটি কিভাবে করবেন তা আপনার সেটআপের উপর নির্ভর করে:

আপনি যদি এলিমেন্টর (সবচেয়ে সহজ পদ্ধতি) ব্যবহার করেন

এলিমেন্টর জাহাজে ফন্ট অসাধারন বিল্ট ইন। আপনি যদি পুরানো আইকন কোড ব্যবহার করেন তবে আপনাকে শুধু নিশ্চিত করতে হবে যে Font Awesome 4 ব্যাকওয়ার্ড সামঞ্জস্য সক্ষম করা হয়েছে।

1. যাও এলিমেন্টর > সেটিংস > উন্নত আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে ট্যাব করুন
2. আবিষ্কার করা “লোড ফন্ট অসাধারণ 4 সমর্থন" এবং এটি সেট করুন "হ্যাঁ"
3. ক্লিক করুন পরিবর্তন সংরক্ষণ করুন

2026 আপডেট: Elementor এখন সাম্প্রতিক সংস্করণে ডিফল্টরূপে Font Awesome 6 লোড করে। "লোড ফন্ট Awesome 4 Support” টগল পুরানো আইকন কোডগুলির সাথে পশ্চাদমুখী সামঞ্জস্য নিশ্চিত করে৷ আপনি যদি FA6 আইকন কোডগুলি ব্যবহার করেন (যেমন থেকে ফন্ট অসাধারণ 6 আইকন অনুসন্ধান), আপনাকে কিছু পরিবর্তন করতে হবে না যেহেতু Elementor এটি স্বয়ংক্রিয়ভাবে পরিচালনা করে।

যদি আপনিও ব্যবহার করছেন এলিমেন্টরের জন্য মাস্টার অ্যাডঅন, আপনি অ্যাক্সেস পেতে 8টি প্রিমিয়াম আইকন লাইব্রেরি বিয়ন্ড ফন্ট অসাধারণ, আপনাকে এলিমেন্টর এডিটরের ভিতরে হাজার হাজার অতিরিক্ত আইকন দিচ্ছে।

আপনি যদি এলিমেন্টর ব্যবহার না করেন

অফিসিয়াল ইনস্টল করুন ফন্ট অসাধারণ প্লাগইন wordpress.org থেকে। সক্রিয়করণের পর:

1. যাও সেটিংস > ফন্ট অসাধারণ
2. আপনার সংস্করণ চয়ন করুন (ফন্ট অসাধারণ 5 বিনামূল্যে বা 6 বিনামূল্যে)
3. বিতরণ পদ্ধতি নির্বাচন করুন (v5 এর জন্য CDN, অথবা v6 এর জন্য একটি কিট)
4. সংরক্ষণ করুন এবং আপনি আপনার সাইট জুড়ে আইকন ব্যবহার করতে প্রস্তুত

গুরুত্বপূর্ণ: লিগ্যাসি CDN এর মাধ্যমে ফন্ট Awesome 6 উপলব্ধ নয়। আপনি যদি FA6 আইকন চান, তাহলে আপনাকে একটি বিনামূল্যের কিট সেট আপ করতে হবে fontawesome।com অথবা ওয়ার্ডপ্রেস প্লাগইনের কিট ইন্টিগ্রেশন ব্যবহার করুন।

ধাপ 2: আইকনের ইউনিকোড হেক্স কোড খুঁজুন

প্রতিটি ফন্ট অসাধারণ আইকনে একটি অনন্য ইউনিকোড হেক্স কোড রয়েছে। এই কোডটি আপনি আপনার যোগাযোগ ফর্ম 7 জমা বোতামে পেস্ট করবেন।

এটি কীভাবে খুঁজে পাবেন তা এখানে:

1. যাও ফন্ট অসাধারণ আইকন অনুসন্ধান পৃষ্ঠা
2. আপনার পছন্দসই আইকন অনুসন্ধান করুন (যেমন, “paper plane”, “envelope”, “arrow right”)
3. এর বিস্তারিত পৃষ্ঠা খুলতে আইকনে ক্লিক করুন
4. জন্য দেখুন ইউনিকোড মান। এটি একটি 4-5 অক্ষরের হেক্স কোডের মতো f1d8 (কাগজের সমতল) বা f0e0 (খাম)

এখানে জমা বোতাম এবং তাদের ইউনিকোড কোডগুলির জন্য কিছু জনপ্রিয় আইকন রয়েছে:

ধাপ 3: আপনার যোগাযোগ ফর্ম 7 জমা বোতামে ফন্ট দুর্দান্ত আইকন যোগ করুন

এখন মূল ইভেন্টের জন্য। আপনি আইকনের ইউনিকোড হেক্স কোডটি সরাসরি CF7 ফর্ম ট্যাগে সন্নিবেশ করবেন। এখানে সঠিক প্রক্রিয়া:

আপনার যোগাযোগ ফর্ম খুলুন

যাও যোগাযোগ > যোগাযোগ ফর্ম আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে। আপনি যে ফর্মটি সম্পাদনা করতে চান তাতে ক্লিক করুন (বা একটি নতুন তৈরি করুন)।

সাবমিট বোতাম ট্যাগ খুঁজুন

ফর্ম এডিটরে, সাবমিট বোতাম ট্যাগটি দেখুন। এটি সাধারণত এই মত দেখায়:

[submit "Submit"]

ইউনিকোড হেক্স কোড ঢোকান

আপনার বোতাম পাঠ্যের পাশে রাখা আইকন কোড দিয়ে জমা ট্যাগ প্রতিস্থাপন করুন। HTML সত্তা বিন্যাস ব্যবহার করুন &#x + হেক্স কোড + ;

উদাহরণস্বরূপ, "বার্তা পাঠান" পাঠ্যের পরে একটি কাগজের সমতল আইকন যোগ করতে:

[submit "Send Message "]

অথবা পাঠ্যের আগে আইকন লাগাতে:

[submit " Send Message"]

এখানে সাবমিট বোতামে আইকন সহ একটি সম্পূর্ণ যোগাযোগ ফর্মের উদাহরণ রয়েছে:

<label>Your Name
    [text* your-name]</label>

<label>Your Email
    [email* your-email]</label>

<label>Subject
    [text your-subject]</label>

<label>Your Message
    [textarea your-message]</label>

[submit "Send Message &#xf1d8;"]

ধাপ 4: আইকন ফন্টের জন্য CSS যোগ করুন

আপনি সাবমিট বোতামের জন্য কোন ফন্ট ব্যবহার করবেন তা ব্রাউজারকে না বলা পর্যন্ত আইকনটি সঠিকভাবে প্রদর্শিত হবে না। এই CSS ছাড়া, আপনি আইকনের পরিবর্তে একটি ছোট বর্গক্ষেত্র বা প্রশ্ন চিহ্ন দেখতে পাবেন।

যাও চেহারা > কাস্টমাইজ > অতিরিক্ত CSS এবং নিম্নলিখিত স্নিপেটগুলির মধ্যে একটি পেস্ট করুন:

অসাধারন 5 ফন্টের জন্য (এলিমেন্টর ডিফল্ট)

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

অসাধারন ফন্টের জন্য 6

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
}

দ্য font-weight: 900 সলিড আইকনগুলির জন্য প্রয়োজন (সবচেয়ে সাধারণ শৈলী)। আপনি যদি নিয়মিত আইকন ব্যবহার করেন তবে এটি পরিবর্তন করুন font-weight: 400। ব্র্যান্ড আইকনগুলির জন্য (যেমন টুইটার বা গিটহাব লোগো), ব্যবহার করুন font-family: "Font Awesome 6 Brands" সঙ্গে font-weight: 400.

প্রো টিপ: যদি আইকনটি ডেস্কটপে দেখায় কিন্তু মোবাইলে না, যোগ করুন -webkit-font-smoothing: antialiased; এবং text-rendering: auto; CSS নিয়মে। এটি ব্রাউজার জুড়ে রেন্ডারিং অসঙ্গতি ঠিক করে।

আপনার CSS সংরক্ষণ করুন এবং ফর্মটির পূর্বরূপ দেখুন। আপনার এখন পাঠ্যের পাশে আপনার জমা বোতামের ভিতরে রেন্ডার করা আইকনটি দেখতে হবে।

বোনাস: CF7 প্লেসহোল্ডার ফিল্ডে ফন্ট অসাধারণ আইকন যোগ করুন

আপনার ফর্ম ফিল্ড প্লেসহোল্ডারদের ভিতরেও আইকন চান? আপনি ইমেল ক্ষেত্রে একটি খাম আইকন, নামের ক্ষেত্রে একটি ব্যবহারকারী আইকন এবং বার্তা ক্ষেত্রে একটি পেন্সিল আইকন যোগ করতে পারেন। এটি একই ইউনিকোড পদ্ধতি নেয়।

এখানে স্থানধারকগুলিতে আইকন সহ CF7 কোড রয়েছে:

[text* your-name placeholder " Your Name"]

[email* your-email placeholder " Your Email"]

[text your-subject placeholder " Subject"]

[textarea your-message placeholder " Your Message"]

[submit "Send Message "]

এখন আপনার স্থানধারকদের জন্য ফন্ট অসাধারণ ফন্ট প্রয়োগ করতে CSS যোগ করুন:

/* Icon font for submit button */
.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

/* Icon font for input placeholders */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    font-family: "Font Awesome 5 Free", Arial, sans-serif;
    font-weight: 900;
    color: #999;
}

স্থানধারক ফন্টে নোট করুন: সেটিং font-family প্লেসহোল্ডারগুলিতে সমস্ত স্থানধারক পাঠ্যকে প্রভাবিত করে, কেবল আইকন নয়। যদি আপনার বাকি স্থানধারক পাঠ্যটি প্রত্যাশার চেয়ে আলাদা দেখায় তবে ফলব্যাক হিসাবে আপনার থিমের বডি ফন্ট যোগ করুন: font-family: "Font Awesome 5 Free", "Your-Theme-Font", sans-serif;

নো-কোড পদ্ধতি: এলিমেন্টরের জন্য মাস্টার অ্যাডঅন সহ CF7 স্টাইল করুন

আপনি যদি CSS সম্পূর্ণভাবে এড়িয়ে যেতে চান, এলিমেন্টরের জন্য মাস্টার অ্যাডঅন একটি উত্সর্গীকৃত অন্তর্ভুক্ত যোগাযোগ ফর্ম 7 উইজেট যা আপনাকে কোডের একটি লাইন না লিখে আপনার ফর্মের চেহারাটি দৃশ্যত কাস্টমাইজ করতে দেয়।

এখানে আপনি কি করতে পারেন সঙ্গে MA যোগাযোগ ফর্ম 7 উইজেট:

• সাবমিট বোতামটি স্টাইল করুন কাস্টম রং, গ্রেডিয়েন্ট, হোভার ইফেক্ট, বর্ডার এবং প্যাডিং সহ
• ইনপুট ক্ষেত্র কাস্টমাইজ করুন পটভূমির রং, সীমানা ব্যাসার্ধ এবং টাইপোগ্রাফি সহ
• পূর্ব-নির্মিত শৈলী প্রিসেট প্রয়োগ করুন এক ক্লিকে একটি পালিশ ফর্ম পেতে
• ব্যবধান এবং বিন্যাস নিয়ন্ত্রণ করুন এলিমেন্টর প্যানেল থেকে প্রতিটি ফর্ম উপাদানের জন্য
• যেকোনো আইকন ব্যবহার করুন থেকে 8টি প্রিমিয়াম আইকন লাইব্রেরি মাস্টার অ্যাডন সঙ্গে বান্ডিল

আপনি যদি চান যে আপনার যোগাযোগের ফর্মটি CSS নির্বাচকদের মধ্যে খনন না করে আপনার সাইটের ডিজাইনের সাথে মেলে তবে এটি দ্রুততম পদ্ধতি। শুধু উইজেটটি টেনে আনুন, আপনার ফর্ম বাছাই করুন এবং ভিজ্যুয়াল এডিটর থেকে সবকিছু স্টাইল করুন।

সাধারণ সমস্যা সমাধান

আইকনটি একটি বর্গাকার বাক্স বা প্রশ্ন চিহ্ন হিসাবে দেখায়

এর মানে হল সাবমিট বোতামের জন্য ফন্ট অসাধারণ ফন্ট লোড হচ্ছে না। ডাবল চেক করুন যে:

• আপনার সাইটে Awesome ফন্ট সক্রিয় করা হয়েছে (এলিমেন্টর সেটিং বা এফএ প্লাগইন)
• আপনার CSS সঠিক অন্তর্ভুক্ত font-family এবং font-weight
• আপনি সঠিক সংস্করণ ব্যবহার করছেন (FA5 বনাম FA6 ফন্ট-পরিবারের নাম ভিন্ন)

আইকন প্রদর্শিত হয় কিন্তু নিয়মিত পাঠ্য অদ্ভুত দেখায়

আপনি যখন সেট font-family সম্পূর্ণ বোতামের জন্য দুর্দান্ত ফন্টে, বোতামের সমস্ত পাঠ্য সেই ফন্টটি ব্যবহার করে। একটি ফলব্যাক ফন্ট যোগ করুন: font-family: "Font Awesome 5 Free", -apple-system, Arial, sans-serif;

আইকনটি ডেস্কটপে কাজ করে কিন্তু মোবাইলে নয়

আপনার CSS নিয়মে এই বৈশিষ্ট্যগুলি যোগ করুন:

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
}

আমি পরিবর্তে একটি :: ছদ্ম-উপাদানের আগে ব্যবহার করতে চাই

CF7 সাবমিট বোতামটি হল একটি <input type="submit"> উপাদান। ইনপুট উপাদান সমর্থন করে না ::before বা ::after ছদ্ম-উপাদান কারণ তাদের চাইল্ড নোড থাকতে পারে না। তাই আমরা পরিবর্তে বোতাম পাঠ্যে সরাসরি ইউনিকোড হেক্স পদ্ধতি ব্যবহার করি। আপনার যদি ছদ্ম-উপাদান সমর্থনের প্রয়োজন হয়, তাহলে আপনাকে সাবমিট বোতামটিকে a-তে রূপান্তর করতে হবে <button> একটি CF7 ফিল্টার হুক ব্যবহার করে ট্যাগ করুন, যার জন্য কাস্টম পিএইচপি প্রয়োজন।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

মোড়ানো

যোগ করা হচ্ছে a আপনার যোগাযোগ ফর্ম 7 জমা বোতামে দুর্দান্ত আইকন ফন্ট করুন একটি ছোট পরিবর্তন যা একটি লক্ষণীয় পার্থক্য করে। ইউনিকোড হেক্স কোড পদ্ধতিটি ফন্ট অসাধারণ 5 এবং 6 জুড়ে কাজ করে, মাত্র দুটি ধাপের প্রয়োজন (ফর্ম ট্যাগ সম্পাদনা করুন + CSS যোগ করুন), এবং সেট আপ হতে 5 মিনিটের কম সময় লাগে।

প্লেসহোল্ডার পদ্ধতির জন্য, একই যুক্তি প্রযোজ্য: প্লেসহোল্ডার অ্যাট্রিবিউটের ভিতরে হেক্স কোড পেস্ট করুন এবং আপনার CSS-এ ফন্ট-পরিবার সংজ্ঞায়িত করুন। উভয় পদ্ধতিই আপনার ফর্মগুলিকে আরও পালিশ, পেশাদার অনুভূতি দেয়।

আপনি যদি সম্পূর্ণভাবে CSS এড়িয়ে যেতে চান, মাস্টার অ্যাডঅন CF7 উইজেট এলিমেন্টরের ভিতরে দৃশ্যত ফর্ম স্টাইলিং পরিচালনা করে। যেভাবেই হোক, আপনার ফর্মগুলি ডিফল্ট CF7 আউটপুটের চেয়ে ভাল দেখাবে।

সম্পর্কিত পড়া: এলিমেন্টর আইকন এবং ফন্ট লাইব্রেরি গাইড | এলিমেন্টরে অ্যানিমেটেড বোতাম কীভাবে তৈরি করবেন | মাস্টার অ্যাডঅন সহ CF7 স্টাইলিং