পাঠ্য ইনপুট উপাদানটির ভিতরে হরফ হরফ আইকন

Question

আমি ব্যবহারকারীর ইনপুট ক্ষেত্রে ইউজার আইকন sertোকানোর চেষ্টা করছি।

ফন্ট আশ্চর্য একটি ফন্ট হওয়ায় সম্পত্তি কাজ করবে না জেনে আমি অনুরূপ প্রশ্ন থেকে সমাধানের একটি চেষ্টা করেছি ।background-image

নিম্নলিখিতটি আমার পদ্ধতির এবং আমি আইকন প্রদর্শনটি পেতে পারি না।

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

আমি ফন্টের মুখটি ডিফল্ট ফন্টে দুর্দান্ত সিএসএসে ঘোষণা করেছি যাতে আমি নিশ্চিত নই যে উপরে ফন্ট-পরিবার যুক্ত করা সঠিক পদ্ধতি ছিল কিনা।

 @font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
 }

Comments

আপনি কি জানতে চান? প্রশ্ন / ত্রুটি কী?

— allcaps

@ অলক্যাপস ওফস .. আমি স্বীকার করছি যে আমার ত্রুটিটি কেবলমাত্র আমার মূল পোস্টটি দেখলেই সনাক্ত করা যায় না। আমি কিছুটা সম্পাদনা করেছি।

— সিওং লি

আমার আপডেট হওয়া উত্তরটি দেখুন।

— allcaps

Answer 1

তুমি ঠিক বলছো. : পূর্বে এবং: সিউডো সামগ্রীর পরে প্রতিস্থাপিত সামগ্রী imgএবং inputউপাদানগুলির জন্য কাজ করার উদ্দেশ্যে নয় । মোড়কের উপাদান যুক্ত করা এবং একটি ফন্ট-পরিবার ঘোষণা করা সম্ভাবনার মধ্যে একটি, যেমন একটি পটভূমি চিত্র ব্যবহার করা হয়। অথবা একটি এইচটিএমএল 5 স্থানধারক পাঠ্য আপনার প্রয়োজন অনুসারে ফিট করে:

<input name="username" placeholder="&#61447;">

ব্রাউজারগুলি যা প্লেসোল্ডার অ্যাট্রিবিউটকে সমর্থন করে না তারা কেবল এটিকে উপেক্ষা করবে।

হালনাগাদ

সামনে বিষয়বস্তু নির্বাচক ইনপুট নির্বাচন: input[type="text"]:before। আপনি মোড়কের নির্বাচন করা উচিত: .wrapper:before। Http://jsfiddle.net/allcaps/gA4rx/ দেখুন । আমি স্থানধারকটির পরামর্শও যুক্ত করেছি যেখানে মোড়কটি অতিরিক্ত und

.wrapper input[type="text"] {
    position: relative; 
}

input { font-family: 'FontAwesome'; } /* This is for the placeholder */

.wrapper:before {
    font-family: 'FontAwesome';
    color:red;
    position: relative;
    left: -5px;
    content: "\f007";
}

<p class="wrapper"><input placeholder="&#61447; Username"></p>

পিছু হট

ফন্ট আশ্চর্য আইকনগুলি সংরক্ষণ করতে ইউনিকোড ব্যক্তিগত ব্যবহার অঞ্চল (PUA) ব্যবহার করে। অন্যান্য অক্ষর উপস্থিত নেই এবং ফিরে ব্রাউজার ডিফল্ট। এটি অন্য কোনও ইনপুটের মতো হওয়া উচিত। আপনি যদি ইনপুট উপাদানগুলিতে কোনও ফন্ট সংজ্ঞায়িত করেন, তবে আমাদের আইকনটি ব্যবহার করে এমন পরিস্থিতিতে ফ্যালব্যাক হিসাবে একই ফন্ট সরবরাহ করুন। এটার মত:

input { font-family: 'FontAwesome', YourFont; }

Comments

আপনার স্থানধারক পদ্ধতি ব্যবহার করে কাজ করে। সমস্যাটি হ'ল স্বাভাবিক (আইকনবিহীন) পাঠ্যটি বাকী পৃষ্ঠার ফন্ট-মুখের সাথে মেলে না এবং ব্রাউজারের ডিফল্ট সেরিফ হিসাবে প্রদর্শিত হবে। এই কাছাকাছি পেতে কোন উপায়?

— হারিগ

ফন্ট আশ্চর্য আইকনগুলি সংরক্ষণ করতে ইউনিকোড ব্যক্তিগত ব্যবহার অঞ্চল (PUA) ব্যবহার করে। অন্যান্য অক্ষর উপস্থিত নেই এবং ফিরে ব্রাউজার ডিফল্ট। এটি অন্য কোনও ইনপুটের মতো হওয়া উচিত। কোথাও ইনপুট উপাদানের উপর একটি ফন্ট নির্ধারণ করে, তাহলে পরিস্থিতিতে জন্য ফলব্যাক হিসাবে একই ফন্ট সরবরাহ যেখানে আমাদের একটি আইকন ব্যবহার করুন: input { font-family: 'FontAwesome' YourFont; }। এটা কি সাহায্য করে? আপনি সর্বদা একটি নতুন প্রশ্ন জিজ্ঞাসা করতে পারেন।

— 18-25

@ প্লেসোল্ডার ওয়ান্ডার্স কাজ করে এমন জন্য ফ্যালব্যাক ফন্ট-পরিবার ব্যবহারের জন্য সুপারিশটি সমস্ত ক্যাপচার! আমি ফ্যালব্যাকের মাধ্যমে ফন্টটি পরিবর্তন করার কথা ভাবিনি। আপনি কি ভবিষ্যতের ব্যবহারকারীদের জন্য একটি ফ্যালব্যাক ফন্ট অন্তর্ভুক্ত করার জন্য আপনার উত্তর আপডেট করতে পারেন? ধন্যবাদ!

— ProfileTwist

আমি কোডের তালিকা কোথায় পেতে পারি? আমি অর্থ ব্যবহারকারীর অর্থ & # 61447;

— ইলিয়োর

@ এলিয়র: আপনার এইচটিএমএল সত্তা ব্যবহার করার দরকার নেই। যদি আপনার প্রকল্পটি ইউটিএফ -8 হয় তবে আপনি কেবলমাত্র দুর্দান্ত ফন্টটি অনুলিপি করতে পারবেন। এটি সম্ভবত আপনার কোড সম্পাদকে একটি ব্লক হিসাবে দেখাবে, তবে এটি ঠিক আছে। আপনি অনেক অনলাইন ইউনিকোড থেকে এইচটিএমএল-সত্তা-রূপান্তরকারীগুলির মধ্যে একটিও ব্যবহার করতে পারেন।

— 16:58

Answer 2

আউটপুট:

এইচটিএমএল:

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

সিএসএস:

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(OR)

আউটপুট:

এইচটিএমএল:

<div class="input-wrapper">
     <input type="text" />
 </div>

সিএসএস:

<style type="text/css">
    .input-wrapper {
        display:inline-block;
        position: relative
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f274';
        position: absolute;
        right: 6px;
    }
</style>

Comments

এটি একটি পাঠ্য বাক্স সহ ফন্ট-দুর্দান্ত ব্যবহারের ক্ষেত্রে দুর্দান্ত পরামর্শ t

— সুনীল

আইকনটি ক্লিকযোগ্য করে তোলা সম্ভব?

— ফ্রেনকিবি

@ ফ্রেঙ্কিবি, হ্যাঁ <স্প্যান ক্লাস = "এফএ-এফ-ইনফোকেশন-সার্কেল এরস্প্যান" অনক্লিক = 'ইয়োর_ফিউশন ()'> </span>

— পালানিকুমার

সেটিং z-index: 1কিছু উদাহরণস্বরূপ চাইতে পারেন যখন একটি datepicker যোগ করার সময় - অন্তর্নিহিত ইনপুট ধরা ফোকাস যখন আপনি আইকনের উপর ক্লিক করুন করতে হবে।

— রোমারিকড্রিগন

আমার পক্ষে ভাল কাজ করে তবে আমি ব্যবহার করি না position: relative(নেতিবাচক মার্জিনগুলির এটির প্রয়োজন হয় না) বা z-index(ইনপুট পরে উপাদানটি

— প্রকাশের সাথে সাথেই

Answer 3

আপনি একটি মোড়ক ব্যবহার করতে পারেন। মোড়কের ভিতরে, ফন্টটি দুর্দান্ত উপাদান i এবং inputউপাদান যুক্ত করুন।

<div class="wrapper">
    <i class="fa fa-icon"></i>
    <input type="button">
</div>

তারপরে মোড়কের অবস্থানটি আপেক্ষিককে সেট করুন:

.wrapper { position: relative; }

এবং তারপরে iউপাদানটির অবস্থানকে পরম স্থানে সেট করুন এবং এর জন্য সঠিক স্থানটি সেট করুন:

i.fa-icon { position: absolute; top: 10px; left: 50px; }

(এটি একটি হ্যাক, আমি জানি, তবে এটি কাজটি করে।

Comments

কেন আমাদের সেখানে র‌্যাপার দরকার?

— আশফাক রিফায়ি

আমি এটি বুঝতে পেরে নিখুঁত উপাদানগুলি নিকটতম 'অবস্থানযুক্ত' পূর্বপুরুষের তুলনায় স্থাপন করা হয়। অবস্থান: আপেক্ষিক মানে মোড়কটি 'পজিশনেড' (এটি পরম, স্থির বা স্টিকিও হতে পারে)। যদি আপনি এটি না করেন তবে আইকনটি ডোমের উচ্চতর কিছু অন্যান্য উপাদানের তুলনায় একেবারে অবস্থানযুক্ত হবে (বা ভিউপোর্টের তুলনায় কোনও অবস্থানযুক্ত উপাদান খুঁজে পাওয়া যায় না)।

— জাকেন হা’ঘর

Answer 4

আপনার যদি নিম্নলিখিত শর্তাদি পূরণের প্রয়োজন হয় তবে এই উত্তরটি আপনার পক্ষে কাজ করবে (বর্তমানের উত্তরগুলির মধ্যে কোনওটিই এই শর্তাদি মেটেনি):

1. আইকনটি পাঠ্য বাক্সের ভিতরে রয়েছে
2. ইনপুটটিতে পাঠ্য প্রবেশ করার সময় আইকনটি অদৃশ্য হওয়া উচিত নয় এবং প্রবেশ করা পাঠ্যটি আইকনের ডানদিকে যায়
3. আইকনটি ক্লিক করা অন্তর্নিহিত ইনপুটটি ফোকাসে আনতে হবে

আমি বিশ্বাস করি যে এই শর্তগুলি মেটানোর জন্য 3 টি হ'ল এইচটিএমএল উপাদানগুলির ন্যূনতম সংখ্যা:

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>

Comments

ইনপুট ফিল্ডের ভিতরে আইকন থাকার জন্য সেরা উত্তর, যেখানে ব্যবহারকারী টাইপ করার সময় আইকনটি দৃশ্যমান থাকে।

— উদ্দেশ্যসিটি

শীর্ষ: ক্যালক (50% - 0.5 মিমি) আপনার লেবেলের

— drichar

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

— স্কেটস

@ স্কিটিস'রিলি আমি সংশোধন হয়ে দাঁড়িয়েছি। আমি বিভ্রান্ত করছি এম এবং রেম। 0.5 ম ফন্টের আকার যাই হোক না কেন তার অর্ধেক। দুর্দান্ত সমাধান, আমি এটি একটি প্রকল্পে ব্যবহার করছি (কেবলমাত্র কাস্টম এসভিজি ব্যবহার করছি, এফএ নয়, যার কোনও ফন্টের আকার নেই, যার ফলে আমার অবস্থান সম্পর্কিত সমস্যা দেখা দিয়েছে এবং ভুল তথ্য দেওয়া হয়েছে)

— drichar

Answer 5

অনেক কোড করার দরকার নেই ... কেবল নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করুন:

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

আপনি এখানে ইউনিকোডের লিঙ্কগুলি খুঁজে পেতে পারেন ( ফন্টউভালস )

আইকনগুলির জন্য ফন্টআউউইজ ইউনিকোড

Comments

আমি যদি ইতিমধ্যে স্থানধারকের জন্য অন্য ফন্ট-পরিবার ব্যবহার করছি? তাহলে এটি কাজ করবে না। "& # Xf002 অনুসন্ধান" পাঠ্যে "অনুসন্ধান" করার কোনও উপায় কি কাস্টম ফন্ট ব্যবহার করে এবং ইউনিকোড এখনও ফন্টউইজ ফন্ট ব্যবহার করে?

— সুস্মিত সাগর

Answer 6

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>

Comments

হাই আপনার দয়া করে সমাধানটির জন্য একটি সামান্য ব্যাখ্যা সংযুক্ত করুন।

— আদিত্য ঠাকুর

এই উত্তরটি আপনার পক্ষে কাজ করবে যদি আপনার নিম্নলিখিত শর্তগুলি পূরণ করা প্রয়োজন (বর্তমান উত্তরগুলির মধ্যে কোনওটিই এই শর্তগুলি মেটেনি): পাঠ্য বাক্সের ভিতরে আইকনটি লেখা থাকে না যখন পাঠ্য ইনপুটটিতে প্রবেশ করা হয় এবং পাঠ্য প্রবেশ করাতে যায় আইকনটির ডানদিকে ক্লিক করা হ'ল অন্তর্নিহিত

— ইনপুটটিকে

Answer 7

এই প্রশ্নের বিভিন্ন সংস্করণ পড়ে এবং চারপাশে অনুসন্ধান করে আমি বেশ পরিষ্কার, জেএস-মুক্ত, সমাধান নিয়ে এসেছি। এটি @ সবক্যাপস সমাধানের অনুরূপ তবে মূল ডকুমেন্ট ফন্ট থেকে দূরে ইনপুট ফন্টের বিষয়টি এড়িয়ে চলে ids

স্থানধারক পাঠ্যটি বিশেষভাবে স্টাইল করতে ::input-placeholderবৈশিষ্ট্যটি ব্যবহার করুন । এটি আপনাকে প্লেসহোল্ডার ফন্ট হিসাবে আপনার আইকন ফন্ট এবং আসল ইনপুট পাঠ্য হিসাবে আপনার দেহ (বা অন্যান্য ফন্ট) ব্যবহার করতে দেয়। বর্তমানে আপনাকে বিক্রেতা-নির্দিষ্ট নির্বাচক নির্দিষ্ট করতে হবে।

আপনার ইনপুট উপাদানটিতে আইকন এবং পাঠ্যের সংমিশ্রণের প্রয়োজন না থাকলে এটি কাজ করে। যদি আপনি তা করেন তবে আপনাকে শব্দের জন্য স্থানধারক পাঠ্যটি ডিফল্ট ব্রাউজার ফন্ট (খনিতে প্লেইন সেরিফ) রাখা উচিত।

যেমন
এইচটিএমএল

<p class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</p>

সিএসএস

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}

ব্রাউজারের প্রিফিক্সড সিলেক্টরদের সাথে ফ্রেড: http://jsfiddle.net/gA4rx/78/

নোট করুন যে আপনাকে প্রতিটি ব্রাউজার-নির্দিষ্ট নির্বাচককে পৃথক বিধি হিসাবে নির্ধারণ করতে হবে। আপনি যদি তাদের একত্রিত করেন তবে ব্রাউজার এটিকে উপেক্ষা করবে।

Comments

যদিও এটি একটি মার্জিত সমাধান, এটি প্রত্যাশিত আচরণ অর্জন করে না।

— অলিভিয়ার রিফালো

প্রকৃতপক্ষে, দেখে মনে হচ্ছে যে ওয়েবকিট ব্রাউজারগুলি কেবলমাত্র font-familyএই মুহুর্তে এই নির্বাচকটির জন্য গ্রহণ করে । আমরা কেবল ভবিষ্যতে আরও ব্যাপক গ্রহণযোগ্যতার আশা করতে পারি।

— হ্যারিগ

Answer 8

আমি বুটস্ট্র্যাপ 4 ব্যবহার করার সবচেয়ে সহজ উপায় খুঁজে পেয়েছি।

<div class="input-group mb-3">
    <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-user"></i></span></div>
    <input type="text"/>
</div>

Answer 9

আমি এটি যেমন অর্জন করেছি

  form i {
    left: -25px;
    top: 23px;
    border: none;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
    color: #29a038;
  }

<form>

  <i class="fa fa-link"></i>

  <div class="form-group string optional profile_website">
    <input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website">
  </div>

  <i class="fa fa-facebook"></i>
  <div class="form-group url optional profile_facebook_url">
    <input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url">
  </div>

  <i class="fa fa-twitter"></i>
  <div class="form-group url optional profile_twitter_url">
    <input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url">
  </div>

  <i class="fa fa-instagram"></i>
  <div class="form-group url optional profile_instagram_url">
    <input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url">
  </div>

  <input type="submit" name="commit" value="Add profile">
</form>

ফলাফলটি এরকম দেখাচ্ছে:

সাইড নোট

দয়া করে নোট করুন যে আমি রুবেলগুলিকে রেলগুলি ব্যবহার করছি যাতে আমার ফলাফল কোডটি কিছুটা ফুটিয়ে উঠেছে। স্লিমের ভিউ কোডটি আসলে খুব সংক্ষিপ্ত:

i.fa.fa-link
= f.input :website, label: false

i.fa.fa-facebook
= f.input :facebook_url, label: false

i.fa.fa-twitter
= f.input :twitter_url, label: false

i.fa.fa-instagram
= f.input :instagram_url, label: false

Answer 10

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

পটভূমি চিত্র এবং পাঠ্যের সাথে আমরা একইভাবে করি, আমরা এখানে করব। আমি মনে করি এটি প্রাথমিকভাবে তাদের জন্যও ভাল, কারণ সিএসএস পজিশন এমন একটি বিষয় যা তাদের কোডিং যাত্রার শুরুতে কোনও শিক্ষানবিশকে শিখতে হবে, সুতরাং কোডটি বোঝা এবং পুনরায় ব্যবহার করা সহজ।

    <div class="searchbar-wrapper">
      <i class="fa fa-search searchbar-i" aria-hidden="true"></i>
      <input class="searchbar-input" type="search" placeholder="Search...">
    </div>

    .searchbar-wrapper{
      position:relative;
    }

    .searchbar-i{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 0 .5rem;
    }

    .searchbar-input{
      padding-left: 2rem;
    }

Answer 11

Allcaps পরামর্শ উপর বিল্ডিং। এখানে কমপক্ষে এইচটিএমএল সহ ফন্ট-সন্ত্রস্ত পটভূমি পদ্ধতি রয়েছে:

<div class="wrapper"><input></div>

.wrapper {
    position: relative; 
}

input { padding-left: 20px; }

.wrapper:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 2px;
    left: 3px;
    content: "\f007";
}

Answer 12

পাঠ্য ইনপুট উপাদানটির ভিতরে ফোকাস করতে ক্লিকযোগ্য আইকন তৈরি করুন।

সিএসএস

.myClass {
    font-size:20px;
    position:absolute; top:10px; left:10px;
}

এইচটিএমএল

<div>
    <label style="position:relative;">
         <i class="myClass fa fa-address-book-o"></i>
         <input class="w3-input" type="text" style="padding-left:40px;">
    </label>
</div>

<i>ফন্ট আশ্চর্য গ্রন্থাগার থেকে আপনি ট্যাগের মধ্যে যে কোনও আইকন পছন্দ করুন এবং ফলাফলগুলি উপভোগ করুন।

Answer 13

<HTML>
<head>
<style>
.inp1{
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
}
</style>
</head>

<body>

<div class="inp1">          
<a href="#" class=""><i class="fa fa-search"></i></a>
</div>

Comments

আপনি যদি এই কোড ব্লকটি কী করছে সে সম্পর্কে কিছু ব্যাখ্যা পোস্ট করেন তবে ওপিতে এটি আরও সহায়ক হবে!

— কিম

Answer 14

খাঁটি সিএসএস

input[type=search] {
    min-width: 320px;
    height: 24px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    margin-top: 6px;
    background-image: url('/img/search.png');
    background-size: 16px;
    background-position: 280px;
    background-repeat: no-repeat;
}

Comments

দয়া করে আপনার উত্তরটি ব্যাখ্যা করতে পারেন?

— ই জেইটিনচি

Answer 15

আমার সমাধানটি ছিল inputআইকনটি ধরে রাখার জন্য কাছাকাছি কোনও সম্পর্কিত পাত্রে রাখা। বাইরের ধারকটি ::afterপছন্দসই আইকন সহ একটি ধারকটির absoluteমধ্যে অবস্থিত।

এইচটিএমএল:

<div class="button__outer">
    <input type="submit" class="button" value="Send"/>
</div>

SASS কোড:

.button {
 display: inline-block;
 width: auto;
 height: 60px;
 line-height: 60px;
}

.button__outer {
    position: relative;
    display: inline-block;
    width: auto;

    &::after {
       position: absolute;
       right: 0;
       top: 0;
       height: 60px;
       line-height: 60px;
       width: 60px;
       font-family: 'FontAwesome', sans-serif;
       content: "\f054";
       color: #fff;
       font-size: 27px;
       font-weight: 700;
    }
}

Answer 16

ইনপুট উপাদানটির ভিতরে একটি ফন্ট-দুর্দান্ত আইকন যুক্ত করার আমার সমাধান olution ইনপুট উপাদানটির ভিতরে আইকন যোগ করার জন্য এখানে একটি সহজ কোড। কেবল নীচের কোডটি অনুলিপি করুন এবং যেখানে আপনি যুক্ত করতে চান সেখানে রাখুন। অথবা আপনি যদি আইকনটি পরিবর্তন করতে চান তবে কেবল আপনার আইকন কোডটি <i> ট্যাগ করুন।

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.soft-codeon {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 50%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: linear-gradient(to right, #ec008c, #fc6767); 
  color: white;
  min-width: 20px;
  text-align: center;
}
.soft-field {
  width: 100%;
  padding: 10px;
  outline: none;
  border:2px solid #fc6767;
}
.soft-field:focus {
  border: 2px solid #ec008c;
}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="soft-codeon">
    <i class="fa fa-user icon"></i>
    <input class="soft-field" type="text" placeholder="Username" name="usrnm">
  </div>
  <div class="soft-codeon">
    <i class="fa fa-envelope icon"></i>
    <input class="soft-field" type="text" placeholder="Email" name="email">
  </div>

Comments

উত্তরটি সহায়ক, তবে যে বাক্যটি স্প্যাম তা অনুমোদিত নয়। আপনি যদি এর মতো কিছু পেতে চান তবে আপনি নিজের প্রোফাইলে একটি লিঙ্ক রাখতে পারেন।

— মাকেন

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

— ক্লাইজস্টার

Answer 17

ফন্ট আশ্চর্য সংস্করণের কারণে আইকনটি প্রদর্শিত হবে না। সংস্করণ 5 এর জন্য, সিএসএস হওয়া উচিত

.dropdown-wrapper::after {
     content: "\f078";
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     color: #000;
     position: absolute;
     right: 6px;
     top: 10px;
     z-index: 1;
     width: 10%;
     height: 100%;
     pointer-events: none;
}

Answer 18

সহজ উপায়, তবে আপনার বুটস্ট্র্যাপ দরকার

 <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-envelope"></i></span> <!-- icon envelope "class="fa fa-envelope""-->
    </div>
    <input type="email" id="senha_nova" placeholder="Email">
  </div><!-- input-group -->

Answer 19

::-webkit-search-cancel-button {
        height: 10px;
        width: 10px;
        display: inline-block;
        /*background-color: #0e1d3033;*/
        content: "&#f00d;";
        font-family: FontAwesome;
        font-weight: 900;
        -webkit-appearance: searchfield-cancel-button !important;
    }
    input#searchInput {
        -webkit-appearance: searchfield !important;
    }

<input data-type="search" type="search" id="searchInput" class="form-control">

Answer 20

আমি নীচের জিনিসগুলি চেষ্টা করেছি এবং এটি সত্যিই ভাল এইচটিএমএল কাজ করে

input.hai {
    width: 450px;
    padding-left: 25px;
    margin: 15px;
    height: 25px;
    background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left;
    background-color: grey;
}

<div >

    <input class="hai" placeholder="Search term">

</div>

Comments

প্রশ্ন হ'ল হরফ আইকনগুলি

— হ'ল

Answer 21

ইউনিকোড বা fontawesome সঙ্গে এই কাজ করার জন্য, আপনি একটি যোগ করা উচিত spanসঙ্গে classনিচের মত:

এইচটিএমএলে:

<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

এটি পাঠ্য

— ইনপুটটির

Answer 22

<!doctype html>
<html>
  <head>
    ## Heading ##
    <meta charset="utf-8">
      <title>
        Untitled Document
      </title>
      </head>
      <style>
        li {
          display: block;
          width: auto;
        }
        ul li> ul li {
          float: left;
        }
        ul li> ul {
          display: none;
          position: absolute;
        }
        li:hover > ul {
          display: block;
          margin-left: 148px;
          display: inline;
          margin-top: -52px;
        }
        a {
          background: #f2f2ea;
          display: block;
          /*padding:10px 5px;
          */
          width: 186px;
          height: 50px;
          border: solid 2px #c2c2c2;
          border-bottom: none;
          text-decoration: none;
        }
        li:hover >a {
          background: #ffffff;
        }
        ul li>li:hover {
          margin: 12px auto 0px auto;
          padding-top: 10px;
          width: 0;
          height: 0;
          border-top: 8px solid #c2c2c2;
        }
        .bottom {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m2 {
          border-left: none;
          border-right: none;
          border-bottom: solid 2px #c2c2c2;
        }
        li.selected {
          background: #6D0070;
        }
        #menu_content {
          /*float:left;
          */

        }
        .ca-main {
          padding-top: 18px;
          margin: 0;
          color: #34495e;
          font-size: 18px;
        }
        .ca-sub {
          padding-top: 18px;
          margin: 0px 20px;
          color: #34495e;
          font-size: 18px;
        }
        .submenu a {
          width: auto;
        }
        h2 {
          text-align: center;
        }
      </style>
      <body>
        <ul>
          <li>
            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 1
                </h2>
              </div>
            </a>
            <ul class="submenu" >
              <li>
                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_1
                    </h2>
                  </div>
                </a>
              </li>
              <li>

                <a href="#" class="sub_m2">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_2
                    </h2>
                  </div>
                </a>
              </li>
              <li >

                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_3
                    </h2>
                  </div>
                </a>

              </li>
            </ul>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 2
                </h2>
              </div>
            </a>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 3
                </h2>
              </div>
            </a>

          </li>
          <li>

            <a href="#"  class="bottom">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 4
                </h2>
              </div>
            </a>

          </li>
        </ul>
      </body>
</html>