আমি কি কেবল CSS ব্যবহার করে বুটস্ট্র্যাপ আইকনগুলিতে রঙ যুক্ত করতে পারি?

Question

টুইটারের বুটস্ট্র্যাপে গ্লাইফিকনস দ্বারা আইকন ব্যবহার করা হয় । তারা "available in dark gray and white ডিফল্টরূপে ":

আইকনগুলির রঙ পরিবর্তন করতে কিছু সিএসএস কৌশল ব্যবহার করা সম্ভব? আমি আরও কিছু সিএস 3 তেজীর জন্য আশা করছিলাম যা প্রতিটি রঙের জন্য একটি আইকন চিত্র স্থাপন করা আটকাবে।

আমি জানি আপনি ঘেরের পটভূমির রঙ পরিবর্তন করতে পারেন (<i> ) উপাদানটির তবে আমি আইকনটির অগ্রভাগের রঙের কথা বলছি। আমি ধারণা করি আইকন চিত্রটিতে স্বচ্ছতা বিপরীত করা এবং তারপরে পটভূমির রঙ সেট করা সম্ভব হবে।

সুতরাং, আমি কি কেবল CSS ব্যবহার করে বুটস্ট্র্যাপ আইকনগুলিতে রঙ যুক্ত করতে পারি?

Comments

আমার মনে হয় না ... তবে আপনি সম্ভবত এটি জাভাস্ক্রিপ্ট এবং একটি ক্যানভাস উপাদান দিয়ে করতে পারেন।

— bfavareto

@ বিভাভরেটো - আপনি কি বিস্তারিত বর্ণনা করতে পারেন? আপনি কি প্রতিটি আইকন আঁকার জন্য কোড / স্থানাঙ্ক নিয়ে আসা বা বিদ্যমান পিএনজি চিত্রটি কোনওভাবে ব্যবহার করতে চান?

— সিডব্লিউ

দুঃখিত, আমি আপনাকে কোড প্রস্তাব করার জন্য ক্যানভাস উপাদানটির সাথে পর্যাপ্ত অভিজ্ঞ নই, তবে আমি জানি আপনি ক্যানভাস দিয়ে পৃথকভাবে পিক্সেলগুলি পরিচালনা করতে পারবেন।

— bfavareto

Answer 1

হ্যাঁ, আপনি যদি বুটস্ট্র্যাপ সহ ফন্ট অসাধারণ ব্যবহার করেন ! আইকনগুলি কিছুটা আলাদা, তবে এর মধ্যে আরও অনেকগুলি রয়েছে, এগুলি যে কোনও আকারে দুর্দান্ত দেখায় এবং আপনি এগুলির রঙ পরিবর্তন করতে পারেন।

মূলত আইকনগুলি হরফ হ'ল সিএসএস বর্ণের সম্পত্তি দ্বারা আপনি তাদের রঙ পরিবর্তন করতে পারেন। একীকরণের নির্দেশাবলী প্রদত্ত লিঙ্কটিতে পৃষ্ঠার নীচে রয়েছে।

---

সম্পাদনা করুন: বুটস্ট্র্যাপ 3.0.০.০ আইকন এখন ফন্ট!

যেমন কিছু অন্যান্য লোক বুটস্ট্র্যাপ st.০.০ প্রকাশের সাথে উল্লেখ করেছে, ডিফল্ট আইকন গ্লাইফগুলি এখন ফন্ট আশ্চর্যর মতো ফন্ট এবং colorসিএসএসের সম্পত্তি পরিবর্তন করে রঙ পরিবর্তন করা যায় । আকার পরিবর্তনের মাধ্যমে font-sizeসম্পত্তির মাধ্যমে করা যায় ।

Comments

আহ, চালাক! সেট করতে ভুলবেন না cursor: default;যাতে ব্যবহারকারীরা আই-বারটি দেখতে না পান। এছাড়াও, এফএফ চার্টওয়েল, সত্যই চালাক হরফ দেখুন: tktype.com/chartwell.php

— দাই

যখন আপনি মাউস-ওভার পাঠ্য (যেমন একটি ওয়ার্ড প্রসেসরের মতো) আপনার কার্সারটি বড় আকারের মূলধনের Iঅক্ষরের মতো দেখায় , এটি পাঠ্য বাছাই করার জন্য ব্যবহৃত হয়। সিএসএসে এটি হিসাবে উল্লেখ করা হয় cursor: text;। এটি "আই-বিম" নামেও পরিচিত।

— দাই

Answer 2

বুটস্ট্র্যাপ আরসি 3 এর সর্বশেষতম প্রকাশের সাথে, আইকনের রঙ পরিবর্তন করা আপনার পছন্দ মতো রঙের সাথে একটি শ্রেণি যুক্ত করা এবং স্প্যানটিতে যুক্ত করার মতোই সহজ।

ডিফল্ট কালো রঙ:

<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>

হবে

<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>

সিএসএস

.icon-success {
    color: #5CB85C;
}

বুটস্ট্র্যাপ 3 গ্লাইফিকন তালিকা

Answer 3

গ্লিফিকনগুলি এখন ফন্ট হওয়ায় আইকনগুলিতে উপযুক্ত রঙ প্রয়োগ করতে প্রাসঙ্গিক ক্লাস ব্যবহার করতে পারেন ।

উদাহরণস্বরূপ: সিএসএসে <span class="glyphicon glyphicon-info-sign text-info"></span> যুক্ত text-infoকরা আইকনটিকে তথ্য নীল রঙে পরিণত করবে।

Comments

ধন্যবাদ প্রাসঙ্গিক ক্লাস প্রয়োগ করার জন্য একটি উপায় খুঁজছিলেন। যে কোনও পাঠ্য- * প্রাসঙ্গিক ক্লাস কাজ করবে

— ডাস্টিন হজস

Answer 4

অন্য রঙে বুটস্ট্র্যাপ আইকনগুলি রাখার আর একটি সম্ভাব্য উপায় হ'ল পছন্দসই রঙে একটি নতুন .png তৈরি করা, (উদাহরণস্বরূপ ম্যাজেন্টা) এবং এটিকে / পাথ টু বুটস্ট্র্যাপ-সিএসএস / আইএমজি / গ্লাইপিকনস-হাফিংস্- ম্যাজেন্টা .png হিসাবে সংরক্ষণ করুন p

আপনার ভেরিয়েবলগুলিতে.বিহীন সন্ধান করুন

// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

এবং এই লাইন যুক্ত করুন

@iconMagentaSpritePath:     "../img/glyphicons-halflings-magenta.png";

আপনার sprites.less এড

/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: url("@{iconMagentaSpritePath}");
}

এবং এটি এর মতো ব্যবহার করুন:

<i class='icon-chevron-down icon-magenta'></i>

আশা করি এটি কাউকে সাহায্য করবে।

Comments

কেবল পুনরাবৃত্তি করতে চেয়েছিলেনI was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color

— সিডব্লুডে

ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ সিএসএসের মাধ্যমে খাঁটিভাবে কাজ করা যায় না। সাধারণত লোকেরা সম্পর্কিত আইকনগুলির সাথে একটি রঙের স্কিম প্রয়োজন - তাই আমি বলব যে 5 টি রঙ সেট পর্যন্ত চ্যালেঞ্জ খুব বেশি নয়।

— শিয়ালবাগগা

@seppludger আপনি কীভাবে একটি নতুন রঙের হাফলিং স্প্রাইট তৈরি করবেন? আপনি কি এটি করতে সফল হয়েছেন? আমি কোনও গ্রাফিক্স সম্পাদক এ এগুলি লোড করলে আমি রঙ পরিবর্তন করতে পারি না।

— নরম্যান

Answer 5

দ্রুত এবং নোংরা কাজ যা আমার জন্য এটি করেছিল তা আসলে আইকনটি রঙ করে না, বরং এটি আপনার পছন্দ মতো রঙে লেবেল বা ব্যাজ দিয়ে ঘিরে থাকে;

<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>

Comments

আপনার উত্তরটি দরকারী ছিল, + ১. আমি সম্পাদনা আইকনটি ব্যবহার করতে চাই এবং হলুদ রঙ রাখতে চাই। আপনি কিভাবে আমাকে এটি করতে পারেন দয়া করে?

ঠিক আছে আপনি আইকন-ঠিক আছে অন্য কিছু পরিবর্তন করতে; যেমন <স্প্যান ক্লাস = "লেবেল-সতর্কতা লেবেল"> <i ক্লাস = "আইকন- <আইকন নাম> আইকন-সাদা"> </ i> </span>। উদাহরণস্বরূপ: <স্প্যান ক্লাস = "লেবেল-সতর্কতা লেবেল"> <i ক্লাস = "আইকন-সম্পাদনা আইকন-সাদা"> </ i> </span>। এটা তোলে নিচ নতুন বুটস্ট্র্যাপ জন্য যেতে উত্তম ..

— frbl

Answer 6

বুটস্ট্র্যাপ গ্লাইফিকন হ'ল ফন্ট। এর অর্থ এটি সিএসএস স্টাইলিংয়ের মাধ্যমে অন্য পাঠ্যের মতো পরিবর্তন করা যেতে পারে।

সিএসএস:

<style>
   .glyphicon-plus {
       color: #F00; 
   }
</style>

এইচটিএমএল:

<span class="glyphicon glyphicon-plus"></span>

উদাহরণ:

<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
   .glyphicon-plus {
        color: #F00;    
   }
</style>
</head>

<body>
    <span class="glyphicon glyphicon-plus"></span>
</body>
</html>

জেন ক্রেমার দ্বারা বুটস্ট্র্যাপ 3 সহ কোর্সটি আপ এবং রানিং কোর্সটি দেখুন বা কাস্টম শৈলীর সাহায্যে মূল সিএসএস ওভাররাইডিংয়ের স্বতন্ত্র পাঠ দেখুন ।

Answer 7

এই সব কিছুটা চতুর্দিকে ...

আমি গ্লাইফগুলি এভাবে ব্যবহার করেছি

  </div>
        <div class="span2">
            <span class="glyphicons thumbs_up"><i class="green"></i></span>
        </div>
        <div class="span2">
            <span class="glyphicons thumbs_down"><i class="red"></i></span>
        </div>

এবং রঙটি প্রভাবিত করতে, আমি এটির মতো মাথার মধ্যে কিছুটা CSS অন্তর্ভুক্ত করেছি

<style>
        i.green:before {
            color: green;
        }
        i.red:before {
            color: red;
        }
    </style>

ভয়েলা, সবুজ এবং লাল থাম্বস।

Answer 8

স্টাইল ট্যাগের সাথেও কাজ করে:

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

Answer 9

এটি আসলে খুব সহজ:

শুধু ব্যবহার করুন:

.icon-name{
color: #0C0;}

উদাহরণ স্বরূপ:

.icon-compass{
color: #C30;}

এটাই.

Answer 10

mask-imageসম্পত্তি ব্যবহার করুন , তবে এটি কিছুটা হ্যাক। এটি এখানে সাফারি ব্লগে প্রদর্শিত হয়েছে ।

এটি এখানে গভীরতার সাথে বর্ণনা করা হয়েছে ।

মূলত আপনি একটি সিএসএস বাক্স তৈরি করতে চাইবেন background-image: gradient(foo);এবং তারপরে সেই পিএনজি চিত্রগুলির উপর ভিত্তি করে এটিতে একটি চিত্র মাস্ক প্রয়োগ করুন।

ফটোশপে স্বতন্ত্র চিত্র তৈরির ক্ষেত্রে এটি আপনার বিকাশের সময় সাশ্রয় করবে, তবে আপনি মনে করেন না যে আপনি বিভিন্ন ধরণের রঙগুলিতে চিত্রগুলি প্রদর্শন করবেন না it ব্যক্তিগতভাবে আমি এটি ব্যবহার করব না কারণ কৌশলটি কার্যকরভাবে ব্যবহার করতে আপনাকে আপনার মার্কআপ সামঞ্জস্য করতে হবে, তবে আমি "পিউরিটি ইজ অব ইরিভেটিভ" স্কুল-চিন্তা-ভাবনার একজন সদস্য।

Comments

mask-imageসম্পত্তির জন্য সমর্থন মনে রাখবেন যে দুর্দান্ত না ।

— স্কট বারটেল

Answer 11

গৃহীত উত্তর (দুর্দান্ত ফন্ট ব্যবহার করে) সঠিক। তবে যেহেতু আমি কেবল বৈকল্পিক ত্রুটিগুলিতে লাল বৈকল্পিক প্রদর্শন করতে চেয়েছি, তাই আমি এই পৃষ্ঠায় দয়া করে অফার করা একটি অ্যাডন প্যাকেজটি ব্যবহার করে শেষ করেছি ।

কেবল সিএসএস ফাইলগুলিতে ইউআরএল পাথগুলি সম্পাদনা করা হয়েছে যেহেতু তারা নিখুঁত (/ দিয়ে শুরু করুন) এবং আমি আপেক্ষিক হতে পছন্দ করি। এটার মত:

.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}

Comments

অবশেষে, বুটস্ট্র্যাপের পুরানো সংস্করণগুলির সাথে সামঞ্জস্য করা এক

— দিমিত্রি জিনজবুর্গ

Answer 12

আপনি বিশ্বব্যাপীও রঙ পরিবর্তন করতে পারেন

অর্থাত

 .glyphicon {
       color: #008cba; 
   }

Answer 13

কেবলমাত্র গ্লাইফিকনস ব্যবহার করুন এবং আপনি কেবল সিএসএস সেট করে রঙ পরিবর্তন করতে সক্ষম হবেন:

#myglyphcustom {
    color:#F00;
}

Answer 14

আমি ভেবেছিলাম আমি সম্ভবত এই পুরানো পোস্টে এই স্নিপেট যুক্ত করতে পারি। আইকনগুলি ফন্ট হওয়ার আগে আমি এটি আগে করেছি had

<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>

এটি @frbl এর স্নিগ্ধ উত্তরের সাথে খুব মিল, তবে এটি অন্য চিত্র ব্যবহার করে না। পরিবর্তে, এটি <i>উপাদানটির ব্যাকগ্রাউন্ড-রঙ সেট করে whiteএবং border-radiusপুরো <i>উপাদানটিকে "বৃত্তাকার" করতে CSS বৈশিষ্ট্য ব্যবহার করে । যদি আপনি খেয়াল করেন, border-radius(7.5px) এর মান সম্পত্তি widthএবং heightসম্পত্তি (উভয় 15px, আইকন বর্গক্ষেত্র তৈরি করে) এর অর্ধেকের তুলনায় <i>উপাদানটিকে বিজ্ঞপ্তি তৈরি করে।