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

Question

প্লেসহোল্ডারটিতে ফন্ট আশ্চর্য আইকন ব্যবহার করা কি সম্ভব? আমি পড়েছি যেখানে কোনও স্থানধারকটিতে এইচটিএমএল অনুমোদিত নয়। এখানে কি কাজ আছে?

placeholder="<i class='icon-search'></i>"

Answer 1

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

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
  </div>
</form>

এই সিএসএস সহ:

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

এবং এটি (সাধারণ) jQuery

$('#iconified').on('keyup', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

তবে হরফগুলির মধ্যে রূপান্তরটি মসৃণ হবে না।

Comments

ফন্টআউওয়াইস সমস্ত অ ইউনিকোড চিহ্নগুলির জন্য নিয়মিত অক্ষর প্রদর্শন করবে। আমার জন্য একটি ইউনিকোড সত্তা serোকানো কাজ করে না, তবে প্রতীকটিতে আটকানো কাজ করে: স্থানধারক = " হ্যালো"

— ড্যানিয়েল খান

ফন্টআউইজ 5 এর সাথে ফন্ট-পরিবার ব্যবহার করুন: ফন্ট অসাধারণ \ 5 বিনামূল্যে; পরিবর্তে.

— অ্যান্ড্রু শুল্টজ

@ অ্যান্ড্রুশাল্টজ, font-family: Font Awesome\ 5 Free;কাজ করে না। আমাকে ঠিক ব্যবহার করতে হয়েছিলfont-family: FontAwesome;

— কানাইলুকাস

আসলে আপনি ইনপুটটিতে বিভিন্ন ফন্ট প্রয়োগ করতে পারেন। আমি এটিতে এফএ 5 প্রো সহ একটি ইনস্টল করে এটি করেছি এবং font-family: 'Font Awesome 5 Pro', 'Montserrat';অনুসন্ধানের ক্ষেত্রে প্রয়োগ করেছি এবং এটি একটি মোহন কাজ করে।

— জেফ ডাব্লু

Answer 2

আপনি যদি এটি ব্যবহার করেন FontAwesome 4.7তবে যথেষ্ট হবে:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<input type="text" placeholder="&#xF002; Search" style="font-family:Arial, FontAwesome" />

হেক্স কোডগুলির একটি তালিকা ফন্ট অসাধারণ চিট শীটে পাওয়া যাবে । যাইহোক, সর্বশেষতম ফন্টআউভিজ 5.0 এ এই পদ্ধতিটি কার্যকর হয় না (আপনি আপডেটের সাথে মিলিত সিএসএস পদ্ধতির ব্যবহার করেও font-family)।

Comments

আপনি কোথায় মূল্য পেয়েছেন? মানে তুমি কিভাবে icon-searchযাও &#xF002?

— Цімошка

আপনার এমনকি id="iconified"স্রেফ অ্যাডের প্রয়োজন নেই class="fa"এবং দুর্দান্ত ফন্টটি আপনার জন্য সিএসএসের যত্ন নেবে।

— পেড্রো হোহেল কারভালহো

আমি এটি কাজ করা ফন্ট ক্রম পরিবর্তন করতে হয়েছিল: <input type="text" placeholder="&#xf002; Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">। অন্যথায় "fl" ধারণকারী একটি প্রতীক দেখানো হয়েছিল।

— গিলিয়াম রেনল্ট

@ ІгарЦімошка হেক্স কোডগুলি সমস্ত চিটশিট ফোর্টওয়েজিয়াল.github.io/Font-Awesome/cheatsheet

— লিয়াম জর্জ

আমি এই কাজ ফন্ট অসাধারণ 5

— রিচার্ড

Answer 3

আমি এই পদ্ধতিটি দিয়ে সমাধান করেছি:

সিএসএসে আমি এই কোডটি ফন্টআউভাস ক্লাসের জন্য ব্যবহার করেছি :

.fontAwesome {
  font-family: 'Helvetica', FontAwesome, sans-serif;
}

এইচটিএমএলে আমি হোল্ডারটির ভিতরে ফন্টওয়াইজ ক্লাস এবং ফন্টউইজ আইকন কোড যুক্ত করেছি :

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">

আপনি কোডপেনে দেখতে পারেন ।

Comments

এটি এফএ 5 প্রো ব্যবহার করেও কাজ করেinput[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; }

— ChrisB

Answer 4

@ এলির উত্তরটি ফন্টআউইউজ 5 তে কাজ করতে পারে তবে এটির জন্য সঠিক ফন্টের নামটি ব্যবহার করা এবং আপনি যে সংস্করণটি চান তার জন্য নির্দিষ্ট সিএসএস ব্যবহার করা দরকার। উদাহরণস্বরূপ, এফএ 5 ফ্রি ব্যবহার করার সময়, আমি যদি all.css অন্তর্ভুক্ত করি তবে এটি কাজ করতে পারি না, তবে আমি solid.css অন্তর্ভুক্ত করলে এটি ঠিকঠাক কাজ করেছে:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">

<input type="text" placeholder="&#xF002; Search" style="font-family: Arial, 'Font Awesome 5 Free'" />

এফএ 5 প্রো এর জন্য হরফের নাম হ'ল ফন্টের দুর্দান্ত 5 প্রো '

Answer 5

যেখানে সমর্থিত, আপনি ::input-placeholderসিউডোলেকেক্টরকে মিলিয়ে ব্যবহার করতে পারেন ::before।

এখানে একটি উদাহরণ দেখুন:

http://codepen.io/JonFabritius/pen/nHeJg

আমি এই বিষয়ে কাজ করছি এবং এই নিবন্ধটি জুড়ে এসেছি, যা থেকে আমি এই স্টাফটি সংশোধন করেছি:

http://davidwalsh.name/html5-placeholder-css

Comments

ফায়ারফক্স ২ in এ এটি পুরোপুরি কাজ করে না আপনি দয়া করে আবার ঘুরে দেখতে পারেন আমি এটি বের করতে পারি না।

— নোটিডার্ট

Answer 6

আমি আম্বারটি ব্যবহার করছি (সংস্করণ 1.7.1) এবং আমার উভয়ই ইনপুটটির মানটি বাঁধতে এবং একটি স্থানধারক ছিল যা একটি ফন্টআউভিজ আইকন ছিল। এম্বারে মানটি বাঁধাইয়ের একমাত্র উপায় (যা আমি জানি) হ'ল বিল্ট ইন হেল্পার ব্যবহার করা। তবে এটি প্লেসহোল্ডারকে পালিয়ে যেতে বাধ্য করে, "& # xF002" ঠিক ঠিক তেমনটি দেখায়, পাঠ্য।

আপনি যদি এম্বার ব্যবহার করছেন বা না করেন তবে ফন্টআউবিজের ফন্ট-পরিবার রাখতে আপনাকে ইনপুটটির স্থানধারকের সিএসএস স্থাপন করতে হবে। এটি এসসিএসএস ( স্থানধারক স্টাইলিংয়ের জন্য বোর্বান ব্যবহার করে ):

    input {
      width:96%;
      margin:5px 2%;
      padding:0 8px;
      border:1px solid #444;
      border-radius: 14px;
      background: #fff;
      @include placeholder {
        font-family: 'FontAwesome', $gotham;
      }
    }

আপনি যদি কেবল হ্যান্ডেলবারগুলি ব্যবহার করছেন, যেমন আগেই উল্লেখ করা হয়েছে আপনি কেবল স্থানধারক হিসাবে এইচটিএমএল সত্তা সেট করতে পারেন:

<input id="listFilter" placeholder="&#xF002;" type="text">

আপনি যদি এম্বার ব্যবহার করে থাকেন তবে প্লেসোল্ডারকে এমন একটি নিয়ামক বৈশিষ্ট্যে আবদ্ধ করুন যার ইউনিকোড মান রয়েছে।

টেমপ্লেটে:

{{text-field
  id="listFilter"
  placeholder=listFilterPlaceholder
  value=listFilter}}

নিয়ামক:

listFilter: null,
listFilterPlaceholder: "\uf002"

এবং মান বাঁধাই ঠিক কাজ করে!

Comments

এটি

— এমবারটি

যারা অন্যান্য ওয়েব প্রযুক্তি ব্যবহার করছেন তাদের জন্য দুর্দান্ত পোস্ট।

— L84

অনেক ধন্যবাদ! আমার মাথাটা বেশ খানিকটা চেঁচাচ্ছে সমাধান বিস্তারিত জানার জন্য ধন্যবাদ!

— মো Tsao

Answer 7

placeholder=""আপনার ইনপুট ব্যবহার করুন। আপনি ফন্টআউজিবল পৃষ্ঠা http://fontawesome.io/icons/ এ ইউনিকোড খুঁজে পেতে পারেন । তবে আপনাকে অবশ্যই নিজের ইনপুটটিতে যুক্ত করতে হবে style="font-family: FontAwesome;"।

Answer 8

আমি fa-placeholderইনপুট পাঠ্যে শ্রেণি যুক্ত করে এটি করি :

<input type="text" name="search" class="form-control" placeholder="&#xF002;" />

সুতরাং, সিএসএসে কেবল এটি যুক্ত করুন:

.fa-placholder { font-family: "FontAwesome"; }

এটি আমর জন্য ভাল কাজ করছে.

হালনাগাদ:

ব্যবহারকারী আপনার পাঠ্য ইনপুটটিতে টাইপ করার সময় ফন্ট পরিবর্তন করতে, দুর্দান্ত ফন্টের পরে আপনার ফন্টটি যুক্ত করুন

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }

Answer 9

ফন্ট অসাধারণ 5 বাস্তবায়ন সম্পর্কে যে কেউ ভাবছেন :

একটি সাধারণ "ফন্ট আশ্চর্য 5" ফন্ট পরিবার নির্দিষ্ট করবেন না, আপনার বিশেষত আপনার কাজ করা আইকনগুলির শাখাটি দিয়ে শেষ করতে হবে। এখানে আমি উদাহরণস্বরূপ "ব্র্যান্ড" শাখা ব্যবহার করছি।

<input style="font-family:'Font Awesome 5 Brands' !important" 
       type="text" placeholder="&#xf167">

আরও বিশদ বিবরণ ইনপুট স্থানধারক পাঠ্যে ফন্ট আশ্চর্যজনক (5) আইকন ব্যবহার করুন

Answer 10

JQuery উপেক্ষা করে ::placeholderইনপুট উপাদান ব্যবহার করে এটি করা যেতে পারে ।

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control name" placeholder="&#xF002;"/>
  </div>
</form>

সিএসএস অংশ

input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }

input.name{ font-family:[font family you want to specify] }

সেরা অংশ: স্থানধারক এবং পাঠ্যের জন্য আপনার আলাদা ফন্ট পরিবার থাকতে পারে

Answer 11

আমি জানি এই প্রশ্নটি অনেক পুরানো। আমি যেমন ব্যবহার করতাম তেমন কোনও সাধারণ উত্তর আমি পাইনি।

আপনি শুধু যোগ করতে হবে fasএবং ইনপুট বর্গ একটি করা বৈধ হেক্স এই ক্ষেত্রে&#xf002 এবং ফন্ট-আশ্চর্যজনক গ্লাইফের জন্য<input type="text" class="fas" placeholder="&#xf002" />

আপনি অফিসিয়াল ওয়েবে প্রতিটি গ্লাইফের ইউনিকোড খুঁজে পেতে পারেন ।

এটি একটি সহজ উদাহরণ যা আপনার সিএসএস বা জাভাস্ক্রিপ্টের প্রয়োজন নেই।

input {
  padding: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form role="form">
  <div class="form-group">
    <input type="text" class="fas" placeholder="&#xf002" />
  </div>
</form>

Comments

এটি হরফ হ'ল ফন্টের উত্তর 5 ধন্যবাদ!

— ল্যাভিএক্স

Answer 12

জেসন দ্বারা প্রদত্ত উত্তরে ফন্টের পরিবর্তন হওয়ায় কিছুটা বিলম্ব এবং জঙ্ক রয়েছে। "কীআপ" এর পরিবর্তে "পরিবর্তন" ইভেন্টটি ব্যবহার করা এই সমস্যার সমাধান করে।

$('#iconified').on('change', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

Answer 13

আমি স্থানধারকটিতে পাঠ্য এবং আইকন উভয়ই সংযুক্ত করেছি।

placeholder="Edit   "

সিএসএস:

font-family: FontAwesome,'Merriweather Sans', sans-serif;

Answer 14

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করতে / করতে চান তবে সমাধানটি ইনপুট-গ্রুপগুলি হবে:

<div class="input-group">
 <div class="input-group-prepend">
  <span class="input-group-text"><i class="fa fa-search"></i></span>
  </div>
 <input type="text" class="form-control" placeholder="-">
</div>

এটির মতো দেখায়: পাঠ্য-প্রিপেন্ড এবং অনুসন্ধান প্রতীক সহ ইনপুট

Answer 15

আমি সমস্যাটি কিছুটা আলাদাভাবে সমাধান করেছি এবং এটি এইচটিএমএল কোডের মাধ্যমে কোনও এফএ আইকন নিয়ে কাজ করে। স্থানধারকের সাথে এই সমস্ত সমস্যার পরিবর্তে আমার সমাধানটি হ'ল:

1. স্বাভাবিক পদ্ধতিতে একটি আইকন রাখার জন্য

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;
}
.block__input {
  padding: some-corrections;
}

2. তারপরে স্থানধারকের পাঠ্য সামঞ্জস্য করুন (এটি সবার জন্য ব্যক্তিগত, আমার ক্ষেত্রে পাঠ্যের ঠিক আগে একটি আইকন ছিল)

HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...

3. এই সমস্যাটি এখানে রয়েছে যে কোনও আইকন আমাদের ইনপুটটির উপরে এবং ক্লিক করতে কার্সার ব্লক করে তাই আমাদের সিএসএসে আরও একটি লাইন যুক্ত করা উচিত

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;

  /* The new line */
  pointer-events: none;
}

4. তবে একটি আইকন স্থানধারকের সাথে একসাথে অদৃশ্য হয়ে যায় না তাই আমাদের এটি ঠিক করা দরকার। এবং এটিও আমার সমাধানের চূড়ান্ত সংস্করণ :

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="    Some text">

CSS
.block__icon {
  position: absolute;
  z-index: 2; /* New line */
  margin: some-corrections;
}
.block__input {
  position: relative; /* New line */
  z-index: 2; /* New line */
  padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
    z-index: 1;
}

আমি আগে যা ভাবি তার থেকে কঠিন, তবে আমি আশা করি আমি এটির সাথে কাউকে সাহায্য করেছি।

কোডেপেন: https://codepen.io/dzakh/pen/YzKqJvy

Answer 16

তেওসি সমাধান solution যতটা সহজ তত সহজ, সুতরাং, কোনও সিএসএস যুক্ত করার দরকার নেই, ফন্ট আশ্চর্য 5 এর জন্য কেবল শ্রেণি = "ফাস্ট" যুক্ত করুন, কারণ এটি উপাদানটিতে যথাযথ সিএসএস ফন্ট ঘোষণা যুক্ত করে।

বুটস্ট্র্যাপ নববারের মধ্যে অনুসন্ধান বাক্সের জন্য এখানে উদাহরণ রয়েছে, ইনপুট-গ্রুপ এবং স্থানধারক উভয়কেই অনুসন্ধান আইকন যুক্ত করা হয়েছে (ডেমোন্ট্রেশনের জন্য, অবশ্যই, কেউ একই সময়ে উভয়ই ব্যবহার করবে না)। চিত্র: https://i.imgur.com/v4kQJ77.png "> কোড:

<form class="form-inline my-2 my-lg-0">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
        </div>
        <input type="text" class="form-control fas text-right" placeholder="&#xf002;" aria-label="Search string">
        <div class="input-group-append">
            <button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
        </div>
    </div>
</form>

Answer 17

কখনও কখনও সর্বোপরি উত্তর জাগ্রত হয় না, যখন আপনি নীচের কৌশলটি ব্যবহার করতে পারেন

.form-group {
  position: relative;
}

input {
  padding-left: 1rem;
}

i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="search">
    <i class="fas fa-search"></i>
  </div>
</form>