কিছুতে গ্লাইফিকনগুলির রঙ নীল করুন - তবে বুটস্ট্র্যাপ 2 ব্যবহার করে সব জায়গায় নয়

Question

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

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

• আমি কি কেবল CSS ব্যবহার করে বুটস্ট্র্যাপ আইকনগুলিতে রঙ যুক্ত করতে পারি?
• আমি কীভাবে বুটস্ট্র্যাপ 3 এর গ্লাইফিকনগুলিকে সাদা করতে পারি?

দয়া করে নোট করুন: আমি বুটস্ট্র্যাপ ২.৩.২ ব্যবহার করছি ।

Answer 1

আইকনটি colorএর পিতামাতার CSS সম্পত্তির মান থেকে বর্ণ গ্রহণ করবে ।

আপনি হয় এটি সরাসরি স্টাইলে যুক্ত করতে পারেন:

<span class="glyphicon glyphicon-user" style="color:blue"></span>

অথবা আপনি এটিকে আপনার আইকনটিতে শ্রেণি হিসাবে যুক্ত করতে পারেন এবং তারপরে CSS এ ফন্টের রঙ সেট করতে পারেন

এইচটিএমএল

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>

সিএসএস

.blue {
    color: blue;
}

এই ঝাঁকুনির একটি উদাহরণ রয়েছে।

Comments

ধন্যবাদ। আমি বুটস্ট্র্যাপ ব্যবহার করছি / 2.3.2/ এটা আমার জন্য কাজ করে না।

— মাইক ফিলস

তবুও আপনি এটি ব্যবহার করতে পারেন, গ্লিকিকোন সম্পর্কিত সমস্ত সিএসএস বিধি মোছা করুন এবং এই সিএসএস ফাইল নেটডনা.ব ूटস্ট্র্যাপসিডিএন / বুটস্ট্র্যাপ / ৩.০.০- rc2/ css/… যুক্ত করুন এবং বুটস্ট্র্যাপ ৩ থেকে গ্লাইফিকন ফন্টগুলি ডাউনলোড করুন, এটি ওয়ার্কআউট করবে।

— বিকাশ ঘোদকে

@ ভিকাসগোডকে, এর জন্য এখনও পুরো প্রকল্পটির সংস্করণ ৩ য় স্থানান্তরিত হওয়া দরকার

— মাকসিম ভি।

Answer 2

text-successগ্লাইফিকনে কেবল টুইটার বুটস্ট্র্যাপ ক্লাস প্রয়োগ করুন:

<span class="glyphicon glyphicon-play text-success">начал работу</span>

উপলব্ধ রঙগুলির সম্পূর্ণ তালিকা: বুটস্ট্র্যাপ ডকুমেন্টেশন: হেল্পার ক্লাস
(নীল এছাড়াও উপস্থিত রয়েছে)

Comments

আপেলের সাথে কমলা মেশাবেন কেন? : \

— USer22999299

* начал работуহয় started a work। আমি উত্তরটি ফ্লাইয়ে লিখব এবং আমি ভাবি নি যে এটি বেশি ভোট হবে। এভাবে স্ক্রিনশটটি আমার পূর্ববর্তী অ্যাপ্লিকেশন থেকে রাশিয়ান ভাষায় তৈরি হয়েছিল যাতে মার্কআপটি কেমন দেখাচ্ছে।

— itnikolay

অপশনটিতে একটি সাফল্য আছে বলে আইকনটি অবশ্যই সুনির্দিষ্টভাবে দেখানো উচিত যদি আমি এটি খুব উপযুক্ত বলে মনে করি।

— টেরিক্স

এটি আরও ভাল কারণ প্রয়োগ করা রঙটি বর্তমান বুটস্ট্র্যাপ থিম রঙের স্কিমের সাথে

— খাপ খায়

@naXa চেষ্টা করুন text-danger। রঙগুলির একটি সম্পূর্ণ তালিকা এখানে ।

— naXa

Answer 3

শেষ পর্যন্ত আমি নিজেই উত্তর পেয়েছি। ২.৩.২ বুটস্ট্র্যাপে নতুন আইকন যুক্ত করতে আমাদের আপনার ফন্টে ফন্ট আওসোম সিএসএস যুক্ত করতে হবে। এটি করার পরে আমরা রঙ এবং আকার পরিবর্তন করতে CSS এর শৈলীগুলিকে ওভাররাইড করতে পারি।

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

সিএসএস

.brown{color:#9b846b}

আমরা যদি আইকনের রঙ পরিবর্তন করতে চাই তবে কেবল বাদামি ক্লাস যুক্ত করুন এবং আইকনটি বাদামী বর্ণে পরিণত হবে। এটি বিভিন্ন আকারের আইকনও সরবরাহ করে।

এইচটিএমএল

<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

Comments

নতুন সংস্করণ (এই মন্তব্যের সময় 4.0.3) বুটস্ট্র্যাপসিডিএন.

— com

Answer 4

আপনি এটি পাশাপাশি করতে পারেন, আশাবাদ সহায়তা করে

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>

Answer 5

বুটস্ট্র্যাপ 3.0 এর জন্য, এটি আমার পক্ষে কাজ করেছে:

.myclass .glyphicon {color:blue !important;}

Answer 6

হ্যাঁ, আপনি আইকনগুলি সাদা রঙে সেট করতে পারেন। এটি আমার জন্য কীভাবে কাজ করেছে তা এখানে।

Bootstrap <3

এইচটিএমএল

<i class="icon-ok icon-white"></i>

এটি আপনার আইকনটি সাদা প্রদর্শিত করবে।

Comments

icon-whiteবুটস্ট্র্যাপ 2. সঙ্গে আমার জন্য কাজ প্রশ্ন নীল চাইলেন, কিন্তু সাদা জন্য একটি একক বর্গ বুদ্ধিমান কুশলী বলে মনে হয়।

— স্মহলোয়ে

Answer 7

বুটস্ট্র্যাপ ২.৩.২ এর জন্য আমি একটি বিকল্প রঙের লাইব্রেরি তৈরি করেছি এটি পুরানো গ্লাইফিকনস লাইব্রেরির জন্য আরও রঙে আগ্রহী যে কোনও ব্যক্তির জন্য ব্যবহার করা সহজ এবং সহজ।

Answer 8

এটি যদি কেবল বুটস্ট্র্যাপ আইকন হয়। নোট করুন আইকনগুলি পাঠ্যের অধীনে বা টাইপোগ্রাফির অধীনে রয়েছে। এইভাবে পাঠ্য রঙের ক্লাস যুক্ত করুন। যেমন পাঠ্য-প্রাথমিক, পাঠ্য-তথ্য এবং তাই এবং আইকন শ্রেণিতে আরও অনেক কিছু:

<i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>

Answer 9

বুটস্ট্র্যাপ> = ভি 4.0 গ্লাইফিকন সমর্থন বাদ দিয়েছে

গ্লাইফিকন আইকন ফন্টটি ফেলে দেওয়া হয়েছে। আপনার যদি আইকনগুলির প্রয়োজন হয় তবে কয়েকটি বিকল্প হ'ল:

গ্লাইফিকনসের প্রবাহ সংস্করণ

Octicons

হরফ হরফ

সূত্র: https://v4-alpha.getbootstrap.com/migration/#compender

আপনি যদি বুটস্ট্র্যাপ> = v4.0 বা আরও নতুন ব্যবহার করে থাকেন তবে বুটস্ট্র্যাপের বিদ্যমান স্টাইলের ক্লাসগুলি ব্যবহার করতে পারেন যেমন text-success,text-warning ইত্যাদি

উদাহরণস্বরূপ, আপনি যদি হরফ অসাধারণ ব্যবহার করছেন:

<i class="fa fa-tag text-danger" aria-hidden="true"></i>

Answer 10

সিএসএস:

.blue-icon{
color:blue !important;
}

এইচটিএমএল

<i class="fa fa-wrench blue-icon"></i>

গ্লাইফিকনগুলি 4.0 এ মুছে ফেলা হয়, আমি ফন্ট-অসাধারণ 4 বা আরও নতুন এর প্রস্তাব দিই :)

Answer 11

পূর্ববর্তী সমস্ত উত্তর সঠিক তবে এখানে একটি সহজ এবং দ্রুত উপায় যদি আপনার রঙ পরিবর্তন করতে কেবল এক জায়গায় এক আইকন প্রয়োজন হয়:

   <p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>  

Answer 12

রঙটি কার্যকর হয় না, যদি আপনি বুটস্ট্র্যাপ ফন্ট পিএনজি চিত্র ব্যবহার করেন, যেমন i।

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

এইচটিএমএল 5 উদাহরণস্বরূপ চিত্র বর্ণের জন্য সিএসএস ফিল্টার ব্যবহার করে

filter: invert(100%)  contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);