হরফ-দুর্দান্ত, ইনপুট টাইপ 'জমা'

Question

ফন্ট-দুর্দান্ততে ইনপুট টাইপ 'সাবমিট' করার কোনও শ্রেণি নেই বলে মনে হচ্ছে। বোতাম ইনপুট জন্য ফন্ট-দুর্দান্ত থেকে কিছু শ্রেণি ব্যবহার করা সম্ভব? আমি আমার অ্যাপ্লিকেশনগুলিতে সমস্ত বোতামে আইকন যুক্ত করেছি (যা আসলে টুইটার-বুটস্ট্র্যাপ থেকে 'বিটিএন' শ্রেণীর সাথে লিঙ্ক করে) তবে 'ইনপুট টাইপ জমা' এ আইকন যুক্ত করতে পারি না can't

অথবা, এই কোডটি কীভাবে ব্যবহার করবেন:

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

এইচটিএমএল:

<input type="submit" id="image-button">Text</input>

(যা আমি এইচটিএমএল থেকে নিয়েছি : এটিতে টেক্সট + ইমেজ সহ একটি জমা বোতাম কীভাবে তৈরি করা যায়? ) ফন্ট-দুর্দান্ত সঙ্গে?

Answer 1

ইনপুট পরিবর্তে বোতাম টাইপ = "জমা" ব্যবহার করুন

<button type="submit" class="btn btn-success">
    <i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>

হরফ F.২.০ ব্যবহারের জন্য esome

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>

Comments

অসাধারণ! আশানুরূপ কাজ করে। সরল_রফর্মের জন্য এটি তৈরি করতে বা সহায়তাকারী তৈরি করার জন্য এখনও কিছু পদক্ষেপ প্রয়োজন তবে এটি তুলনামূলক সহজ।

— denis.peplin

<button type=submit>এবং এর মধ্যে পার্থক্য সম্পর্কেও সচেতন থাকুন <input type=submit>: স্ট্যাকওভারফ্লো.com

— পাভলো

@ স্ট্যানিস্লাভ-মেয়রভ এটি কাজ করে। আপনি যদি বর্তমান সংস্করণ 4.7 ব্যবহার করছেন তবে আপনাকে 3.2.0 (2012 থেকে) থেকে সামঞ্জস্য করতে হবে। আপডেট করা উত্তর চেষ্টা করুন।

— জোয়াও Leme

@ জোয়াওলিম <button type="submit">কোনও রূপে কাজ করে?

— রিউইজো

পৃষ্ঠাটি পুনরায় লোড করা এড়াতে চাইলে এটি কাজ করে না।

— সালভায়নার

Answer 2

এইচটিএমএল

যেহেতু <input>উপাদানটি কেবলমাত্র বৈশিষ্ট্যটির মান প্রদর্শন করে, তাই কেবলমাত্র এটিই আমাদের পরিচালনা করতে হবে:

<input type="submit" class="btn fa-input" value="&#xf043; Input">

আমি এখানে সত্তাটি ব্যবহার করছি , যা ইউ + এফ 0৩৩, হরফের 'ফন্ট' চিহ্নের সাথে মিলে যায়।

সিএসএস

তারপরে হরফটি ব্যবহার করতে আমাদের এটি স্টাইল করতে হবে:

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

যা আমাদের ফন্ট আশ্চর্যের মধ্যে টিন্ট প্রতীক এবং উপযুক্ত ফন্টে অন্য পাঠ্য দেবে।

তবে, এই নিয়ন্ত্রণটি পিক্সেল-নিখুঁত হবে না, তাই আপনাকে নিজেরাই এটি টুইট করতে হতে পারে।

Comments

উত্তরের জন্য ধন্যবাদ, এটি কাজ করে, তবে আমি আসলে এই পদ্ধতির ব্যবহার করতে পারি না, কারণ ফন্টটি পুরো মানটির পাঠকে প্রভাবিত করে। আমি অন্যান্য বোতামগুলিতেও 'আইকন-লার্জ' ব্যবহার করি ... যারা এটি চেষ্টা করবেন তাদের জন্য ফন্ট কোডগুলি এখানে রয়েছে: github.com/FortAwesome/Font-Awesome/blob/master/sass/…

— denis.peplin

আমি মনে করি আমরা এখানে এটি করতে পারি। ব্যক্তিগতভাবে আমি আপনাকে <input>একটি আইকন ছেড়ে যাওয়ার পরামর্শ দিই ।

— পাভলো

ভাল কাজ করেছেন, আমাকে <ইনপুট টাইপ = "জমা"> ব্যবহার করতে হবে কারণ আমার এক ফর্মের মধ্যে দুটি জমা রয়েছে

— মুনিআর

এটি উপাদান 'শ্রেণিতে "এফএ" যুক্ত করার চেয়ে ভাল, যেহেতু "ফা" উপাদানটির উচ্চতা পরিবর্তন করবে।

— সিইওই শেন 申思维

এছাড়াও আপনি font-familyপাঠ্য সামগ্রী রয়েছে এমন কোনও HTML উপাদানগুলিতে এটি ইনলাইন স্টাইলের সম্পত্তি ব্যবহার করতে পারেন।

— সৈয়দবাকআর

Answer 3

আপনি হ'ল দুর্দান্ত ফন্ট ব্যবহার করতে পারেন চিটশিট

<input type="submit" class="btn btn-success" value="&#xf011; Login"/>

এখানে cheatsheet জন্য লিঙ্ক http://fortawesome.github.io/Font-Awesome/cheatsheet/

Comments

এটি আমার দিন তৈরি! ধন্যবাদ .. অন্য যে কোনও ব্যবহারকারীর জন্য দয়া করে বাক্যটি নোট করুন: এই পৃষ্ঠা থেকে সরাসরি আইকনগুলি ( ইউনিকোড নয় ) অনুলিপি করুন এবং আসল আইকনটি অনুলিপি করুন এবং এটি কাজ করবে

— পিএসআর

<input type="button" class="fa" value="&#xf011; Login"/>বুটস্ট্র্যাপ ছাড়াই এফ এ ক্লাসটি ব্যবহার করে এটি ব্যবহার করুন

— স্ট্যাকহোলা

আপনি যদি জাভাস্ক্রিপ্ট বা jQuery দিয়ে এটি সেট করার চেষ্টা করছেন তবে ইউনিকোড প্রকরণটি ব্যবহার করুন:$("input.search").addClass("fa").val("\uf011 Login");

— জ্যামি চং

এমনকি বুটস্ট্র্যাপের সাথেও এই কাজটি পেতে আমার ক্লাস = "এফএ" যুক্ত করতে হবে।

— denis.peplin

Answer 4

ওয়েল, টেকনিক্যালি এটা সম্ভব পেতে এর :beforeএবং :afterছদ্ম উপাদানে কাজ inputউপাদান

ডাব্লু 3 সি থেকে :

12.1 সিউডো-উপাদানগুলির পূর্বে এবং: পরে

লেখকগুলি সিউডো-উপাদানগুলির পরে: এর আগে এবং: এর সাথে উত্পন্ন সামগ্রীর স্টাইল এবং অবস্থান নির্দিষ্ট করে। তাদের নামগুলি ইঙ্গিত করে যে: সিউডো-উপাদানগুলির পরে এবং এর আগে: সিউডো উপাদানগুলি কোনও উপাদানের ডকুমেন্ট ট্রি সামগ্রীর আগে এবং পরে সামগ্রীর অবস্থান নির্দিষ্ট করে। এই ছদ্ম-উপাদানগুলির সাথে একত্রে 'সামগ্রী' বৈশিষ্ট্যটি whatোকানো হয়েছে তা নির্দিষ্ট করে specif

---

সুতরাং আমার একটি প্রকল্প ছিল যেখানে আমি inputট্যাগ আকারে বোতাম জমা দিয়েছিলাম এবং কিছু কারণে অন্যান্য বিকাশকারীরা আমাকে <button>সাধারণ ইনপুট জমা দেওয়ার বোতামের পরিবর্তে ট্যাগ ব্যবহার করতে বাধা দেয় , তাই আমি spanসেটটির ভিতরে বোতামগুলি মোড়ানোর জন্য আরও একটি সমাধান নিয়ে এসেছি I থেকে position: relative;এবং তারপর একেবারে আইকন পজিশনিং ব্যবহার :afterছদ্ম।

দ্রষ্টব্য: ডেমো ফিডাল ফন্টআউজিয়াম 3.2.1 এর জন্য সামগ্রী কোড ব্যবহার করে যাতে আপনার contentসেই অনুযায়ী সম্পত্তিটির মান পরিবর্তন করতে হতে পারে ।

এইচটিএমএল

<span><input type="submit" value="Send" class="btn btn-default" /></span>

সিএসএস

input[type="submit"] {
    margin: 10px;
    padding-right: 30px;
}

span {
    position: relative;
}

span:after {
    font-family: FontAwesome;
    content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
    font-size: 13px;
    position: absolute;
    right: 20px;
    top: 1px;
    pointer-events: none;
}

Demo

এখন এখানে সমস্ত কিছু এখানে স্বতন্ত্র বর্ণনাকারী, প্রায় এক সম্পত্তি হিসাবে pointer-events: none;, আমি এটি ব্যবহার করেছি কারণ :afterছদ্ম উত্পন্ন সামগ্রীর উপর ঘোরাঘুরি করার পরে , আপনার বোতামটি ক্লিক করবে না, সুতরাং এর মানটি ব্যবহার noneকরে ক্লিকের পদক্ষেপটি সেই সামগ্রীটির মধ্য দিয়ে যেতে বাধ্য করবে ।

থেকে মজিলা ডেভেলপার নেটওয়ার্ক :

উপাদানটি মাউস ইভেন্টগুলির লক্ষ্য নয় এটি ইঙ্গিত করার পাশাপাশি মানটি কোনওটিই মাউস ইভেন্টটিকে উপাদানটির মধ্য দিয়ে "যেতে" নির্দেশ দেয় এবং পরিবর্তে "এলিমেন্টের নীচে" যাই হোক না কেন এটি লক্ষ্য করে।

হার্টের ফন্ট / আইকনটিকে ঘুরে Demoদেখুন এবং যদি আপনি ব্যবহার না করেন তবে কী হয় তা দেখুনpointer-events: none;

Comments

খুব শীতল সমাধানের ক্ষেত্রে এটির একটি বড় নেতিবাচক দিক রয়েছে: পয়েন্টার-ইভেন্টগুলি: আইই <11 দ্বারা কোনওটিই সমর্থিত নয় ( caniuse.com/#feat=pointer-events )। পয়েন্টার-ইভেন্টের সম্পত্তিটি এসভিজি উপাদানগুলির জন্য তৈরি হয়েছিল (ভেক্টর গ্রাফিক্স) এবং এটি অন্যান্য এইচটিএমএল উপাদানগুলির জন্য ডাব্লু 3 সি স্পেকসগুলিতে প্রযুক্তিগতভাবে নেই (যদিও, উইকি.csswg.org/spec/css4-ui#pointer-events ) আইআই 11 ব্যতীত সমস্ত আধুনিক ব্রাউজার এটিকে সমর্থন করে।

— ক্যাস্পিয়ানআরচ

Answer 5

আপনি বোতামের ক্লাস btn-linkএবং btn-xsটাইপ সহ ব্যবহার করতে পারেন submitযা এর ভিতরে একটি আইকন দিয়ে একটি ছোট অদৃশ্য বোতাম তৈরি করবে। উদাহরণ:

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>

Answer 6

এটিও সম্ভব

<button type="submit" class="icon-search icon-large"></button>

Answer 7

একাধিক জমা দেওয়ার সাথে সাথে, যখন আপনার জমা দেওয়া নির্বাচনের মান প্রয়োজন হয়, এটি বেশ সহজেই করা যায়। আপনার ফর্মটিতে কেবল একটি লুকানো ক্ষেত্র তৈরি করুন এবং কী বোতামটি ক্লিক করা হয়েছে তার উপর নির্ভর করে এর মান পরিবর্তন করুন। উদাহরণস্বরূপ, ফর্মটিতে, আপনার কাছে বলুন:

<input type="hidden" id="Clicked" name="Clicked" value="" />
<button type="submit" class="btn btn-success ClickCheck" id="Create"> <i class="fa fa-file-pdf-o"> Create Bill</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Reset"> <i class="fa fa-times"> Reset</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="StoreData"> <i class="fa fa-archive"> Save</i></button>

JQuery ব্যবহার:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>

তারপরে আপনি "ক্লিক করা" পোস্টের ভেরিয়েবলটিতে ক্লিক করা বোতামটির মান পুনরুদ্ধার করতে পারেন