আমি কীভাবে ইনপুট ক্ষেত্রে কোনও ফন্ট আশ্চর্য আইকন যুক্ত করব?

Question

আমি কীভাবে ইনপুটটির জন্য ফন্ট আশ্চর্য অন্তর্ভুক্ত অনুসন্ধান আইকনটি ব্যবহার করব? আমার সাইটে আমার একটি অনুসন্ধান বৈশিষ্ট্য রয়েছে (পিএইচপি মোশন ভিত্তিক), যা আমি অনুসন্ধানের জন্য ব্যবহার করতে চাই।

কোডটি এখানে:

<div id="search-bar">

      <form method="get" action="search.php" autocomplete="off" name="form_search">
        <input type="hidden" name="type" value="videos" />
            <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
            'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
            font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
            #ffffff" />
            <input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
        <div id="searchBoxSuggestions"></div>
        </form>
        </div>

Answer 1

আপনি এর পরিবর্তে অন্য একটি ট্যাগ ব্যবহার করতে পারেন inputএবং ফন্টআউভালটিকে স্বাভাবিক উপায়ে প্রয়োগ করতে পারেন ।

আপনার inputটাইপের পরিবর্তে imageআপনি এটি ব্যবহার করতে পারেন:

<i class="icon-search icon-2x"></i>

দ্রুত সিএসএস :

.icon-search {
    color:white;
    background-color:black;
}

এখানে একটি দ্রুত গলগল: ডেমো

আপনি এটিকে কিছুটা আরও ভাল স্টাইল করতে পারেন এবং আই আইজেক্টে ইভেন্টের কার্যকারিতা যুক্ত করতে পারেন যা আপনি <button type="submit">পরিবর্তে কোনও বস্তু ব্যবহার করে iবা জাভাস্ক্রিপ্ট দিয়ে করতে পারেন।

বোতাম সলিউশন কিছু হবে:

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

এবং সিএসএস :

.icon-search {
    height:32px;
    width:32px;
    border: none;
    cursor: pointer;
    color:white;
    background-color:black;
    position:relative;
}

এখানে আমার পরিবর্তে বোতামটি পরিবর্তিত হয়েছে আমি: ডেমো button

---

আপডেট: যে কোনও ট্যাগে ফন্টআউজ ব্যবহার করা

ফন্টআওসোমের সমস্যাটি হ'ল এর স্টাইলশীটটি :beforeউপাদানগুলিতে আইকন যুক্ত করতে সিউডো-উপাদান ব্যবহার করে - এবং সিউডো উপাদানগুলি উপাদানগুলিতে কাজ করে না / inputউপাদানগুলিতে অনুমোদিত নয় । এই কারণেই ফন্টআউভ্যাস স্বাভাবিক পদ্ধতি ব্যবহার করা কার্যকর হবে না input।

তবে এর একটি সমাধান রয়েছে - আপনি ফন্টআউবাইসকে নিয়মিত হরফ হিসাবে ব্যবহার করতে পারেন:

সিএসএস:

input[type="submit"] {
    font-family: FontAwesome;
}

এইচটিএমএল:

<input type="submit" class="search" value="&#xf002;" />

গ্লিফগুলি গুণকের মান হিসাবে পাস করা যেতে পারে value। পৃথক অক্ষরগুলির জন্য ASCII কোড / আইকন FontAwesome CSS ফাইল খুঁজে পাওয়া যেতে পারে, আপনি শুধু তাদের মত একটি এইচটিএমএল ASCII নম্বরে পরিবর্তন করতে হবে \f002করতে এবং এটি কাজ করা উচিত।

FontAwesome লিঙ্ক করুন ASCII কোড ( cheatsheet ): fortawesome.github.io/Font-Awesome/cheatsheet

আইকনগুলির আকার সহজেই এর মাধ্যমে সামঞ্জস্য করা যায় font-size।

inputJsfidde এ একটি উপাদান ব্যবহার করে উপরের উদাহরণটি দেখুন :

ডেমো

---

আপডেট: ফন্টআউভেস 5

ফন্টআউইজ ভার্সন 5 এর সাহায্যে এই সমাধানের জন্য প্রয়োজনীয় সিএসএস পরিবর্তিত হয়েছে - ফন্টের পরিবারের নাম পরিবর্তন হয়েছে এবং ফন্টের ওজন নির্দিষ্ট করতে হবে:

input[type="submit"] {
    font-family: "Font Awesome 5 Free"; // for the open access version
    font-size: 1.3333333333333333em;
    font-weight: 900;
}

আপডেট করা ফিডল বেলোটির লিঙ্কের সাথে @ উইলফাস্টির মন্তব্য দেখুন। ধন্যবাদ!

Comments

@ এইচটিএমএল ডেভেলপার হ'ল সমস্যাটি হ'ল ফন্টআউজিবল সাধারণত প্রয়োগ করা হয় ... কারণ এটি ব্যবহার করে :beforeএবং এর সাথে কাজ করে না inputবা imgট্যাগ করে না ... তবে এর একটি সহজ সমাধান রয়েছে - নামটি হ'ল ফন্টআউইজকে নিয়মিত ফন্ট হিসাবে ব্যবহার করা ... আমার আপডেট সমাধান দেখুন উপরে। আমি আশা করি আমি ভোটটি ফিরে

— পেয়েছি

আপনি @ এইচটিএমএল ডেভেলপারকে জানুন ... তিনি তার উত্তরে স্পষ্ট করে বলেছিলেন (সমস্ত সম্পাদনাগুলিতে, আমি চেক করেছি) যে আপনি কোনও ইনপুট ট্যাগে ফন্ট অসাধারণ স্টাইল প্রয়োগ করতে পারবেন না। তারপরে তিনি বেশ কয়েকটি বিভিন্ন সমাধান পোস্ট করেছিলেন এবং এর মধ্যে একটি বোতাম ব্যবহার করে অন্তর্ভুক্ত রয়েছে। তারপরে আপনি তার নিজের সঠিক উত্তরটি নিজের মধ্যে ব্যবহার করতে এগিয়ে গেলেন। খারাপ ফর্ম।

— o_O

লিঙ্ক করুন ASCII কোড ( cheatsheet :) fortawesome.github.io/Font-Awesome/cheatsheet

— Vadorequest

@ ভাদোরোয়েস্ট ধন্যবাদ! ভাল ধারণা ... আমি উত্তরের লিঙ্কটি যুক্ত করেছি ^ _ ^

— মার্টিন তুরজাক

+1 fkn বিশাল কৌশল !! ধন্যবাদ আমি ভাবছিলাম কেন & # xf002; ফন্ট-পরিবার যুক্ত করার জন্য এটি উপলব্ধি করার জন্য আপনাকে ইনপুটটিতে দেখানো হচ্ছে না: ফন্টআউভিজ; আপনি আমাকে বাঁচিয়েছেন: ডি

— Itme

Answer 2

এখানে এমন একটি সমাধান রয়েছে যা সাধারণ সিএসএস এবং মানক ফন্টের দুর্দান্ত সিনট্যাক্স, ইউনিকোড মানগুলির প্রয়োজন নেই ইত্যাদি নিয়ে কাজ করে is

1. আপনার প্রয়োজনীয় আইকনটি সহ <input>একটি স্ট্যান্ডার্ড ট্যাগের পরে একটি ট্যাগ তৈরি করুন <i>।

2. উচ্চতর স্তর অর্ডার (জেড-ইনডেক্স) এর সাথে একত্রে আপেক্ষিক অবস্থান ব্যবহার করুন এবং ইনপুট ক্ষেত্রের উপরে এবং উপরে আইকনটি সরান।

3. (Ptionচ্ছিক) আপনি স্ট্যান্ডার্ড জেএস এর মাধ্যমে ডেটা জমা দিতে আইকনটিকে সক্রিয় করতে পারেন।

এইচটিএমএল / সিএসএস / জেএসের জন্য নীচে তিনটি কোড স্নিপেট দেখুন।

বা এখানে জেএসফিডেলে একই: উদাহরণ: http://jsfiddle.net/ethanpil/ws1g27y3/

$('#filtersubmit').click(function() {
  alert('Searching for ' + $('#filter').val());
});

#filtersubmit {
  position: relative;
  z-index: 1;
  left: -25px;
  top: 1px;
  color: #7B7B7B;
  cursor: pointer;
  width: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>

Answer 3

যারা, কীভাবে ফন্টআউভ্যাস আইকনগুলি ড্রুপাল ইনপুটটিতে পাবেন তা ভাবছেন, আপনাকে প্রথমে ডিকোড_েন্টিটি করতে হবে:

$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);

Answer 4

আপনার ইনপুটটিকে একটি বোতামের উপাদানে পরিবর্তন করুন এবং আপনি এতে ফন্ট আশ্চর্য ক্লাস ব্যবহার করতে পারেন। গ্লাইফের সারিবদ্ধকরণ ডেমোতে দুর্দান্ত নয় তবে আপনি ধারণাটি পাবেন:

http://tinker.io/802b6/1

<div id="search-bar">
  <form method="get" action="search.php" autocomplete="off" name="form_search">
    <input type="hidden" name="type" value="videos" />
        <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
        'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
        font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
        #ffffff" /><!--
        --><button class="icon-search">Search</button>
    <div id="searchBoxSuggestions"></div>
    </form>
</div>

#search-bar .icon-search {
    width: 30px;
    height: 30px;
    background: black;
    color: white;
    border: none;
    overflow: hidden;
    vertical-align: middle;
    padding: 0;
}

#search-bar .icon-search:before {
    display: inline-block;
    width: 30px;
    height: 30px;
}

এখানে সুবিধাটি হ'ল ফর্মটি এখনও এমন উপাদানগুলির জন্য ইভেন্ট হ্যান্ডলারগুলি যুক্ত না করে পুরোপুরি কার্যকরী হয় যা বোতাম নয় তবে একটির মতো দেখতে।

Answer 5

শীর্ষ উত্তরের মতো, আমি ইউনিকোড অক্ষরটি এইচটিএমএলের মান = বিভাগে ব্যবহার করেছি এবং সেই ইনপুট উপাদানটিতে ফন্ট পরিবার হিসাবে ফন্টআউভিয়াস বলেছি। কেবলমাত্র আমি যুক্ত করব যে শীর্ষের উত্তরটি কভার করে না তা হ'ল আইকনটির পরে আমার মান উপাদানটিতেও পাঠ্য ছিল, ফন্ট পরিবারকে ফন্টআউবিজে পরিবর্তন করা নিয়মিত পাঠকে খারাপ দেখায়। সমাধানটি ছিল সিএসএস পরিবর্তন করার জন্য ফ্যালব্যাক ফন্টগুলি অন্তর্ভুক্ত:

<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">

font-family: FontAwesome, Roboto, sans-serif;

এইভাবে, ফন্টআউবিজ আইকনটি ধরে ফেলবে, তবে সমস্ত অ-আইকন পাঠ্যে পছন্দসই ফন্ট প্রয়োগ করা হবে।

Answer 6

.fa-file-o {
    position: absolute;
    left: 50px;
    top: 15px;
    color: #ffffff
}

<div>
 <span class="fa fa-file-o"></span>
 <input type="button" name="" value="IMPORT FILE"/>
</div>

Answer 7

দুর্দান্ত ফন্টের দুর্দান্ত উপায়

  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="txtSearch"  >
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
                    </div>
                </div>

Answer 8

ইউনিকোড বা ফন্টউইউজ সহ এটিকে কাজ করতে, আপনার নীচের মতো শ্রেণীর সাথে একটি স্প্যান যুক্ত করা উচিত কারণ ইনপুট ট্যাগ সিউডো ক্লাসকে সমর্থন করে না: পরে। এটি সরাসরি সমাধান নয়

এইচটিএমএলে:

   <span class="button1 search"></span>
<input name="username">

সিএসএসে:

.button1 {
    background-color: #B9D5AD;
    border-radius: 0.2em 0 0 0.2em;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); 
    pointer-events: none;
    margin:1px 12px;    
    border-radius: 0.2em;    
    color: #333333;
    cursor: pointer;
    position: absolute;
    padding: 3px;
    text-decoration: none;   

}

Comments

ইনপুট ট্যাগের জন্য প্রশ্ন জিজ্ঞাসা করেছে আপনি স্প্যান ট্যাগের জন্য উত্তর দিয়েছেন

— o_O

আসলে, বোতামগুলির পরিবর্তে পাঠ্য ইনপুটগুলিতে প্রয়োগ করার একমাত্র উত্তর, সুতরাং +1।

— বোরিসকুনসকি

আসলে @incarnate এই উত্তর, একটি ইনপুট ক্ষেত্রে কিন্তু একটি স্প্যান শৈলী প্রযোজ্য নয় যেহেতু MartinTurjak তার একটি সম্পূর্ণ সমাধান (এবং অতিরিক্ত বিকল্প) উপলব্ধ করা হয় উপরে উত্তর ।

— ববিজেড

আমি এখানে সত্যিই পাঠ্য ইনপুট বোঝাতে চাইছি কারণ বিষয়টি বলে states আমি কীভাবে ইনপুট ক্ষেত্রে একটি ফন্ট আশ্চর্য আইকন যুক্ত করব? » - এবং বোতাম সম্পর্কে কিছুই উল্লেখ করে। মার্টিনটুরজাক টেক্সট ক্ষেত্র নয়, স্টাইল বোতামের জন্য ভাল উপায়গুলি বর্ণনা করে।

— বোরিসকুনসকি