html بوتستراب تغيير لون glyphicons إلى اللون الأزرق في بعض ولكن ليس في جميع الأماكن باستخدام Bootstrap 2




بوتستراب (8)

أنا أستخدم إطار Bootstrap لواجهة المستخدم الخاصة بي. أريد تغيير لون صورتي المتحركة إلى اللون الأزرق ، ولكن ليس في كل الأماكن. في بعض الأماكن يجب أن يستخدم اللون الافتراضي.

لقد أشرت إلى هذين الرابطين ، لكنني لا أجد أي شيء مفيدًا.

يرجى ملاحظة: أنا باستخدام Bootstrap 2.3.2 .


يمكنك القيام بذلك أيضا ، نأمل أن يساعد

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

CSS:

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

HTML

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

تتم إزالة Glyphicons في 4.0 ، أوصي Font-awesome 4 أو أحدث :)


لقد قمت بإنشاء مكتبة ألوان بديلة لـ bootstrap 2.3.2 وهي متوفرة وسهلة الاستخدام لأي شخص مهتم بمزيد من الألوان لمكتبة الرسوم المتحركة القديمة.


نعم ، يمكنك ضبط الرموز على اللون الأبيض. هنا كيف نجحت بالنسبة لي.

Bootstrap <3

HTML

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

سيؤدي هذا إلى ظهور الرمز الخاص بك باللون الأبيض.


أخيرا وجدت الإجابة بنفسي. لإضافة رموز جديدة في 2.3.2 bootstrap ، يجب إضافة Font Awsome css في ملفك. بعد القيام بذلك ، يمكننا تجاوز الأنماط باستخدام css لتغيير اللون والحجم.

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

CSS

.brown{color:#9b846b}

إذا كنا نريد تغيير لون الرمز ، فقم بإضافة فئة بنية ورمزًا باللون البني. كما أنها توفر أيقونة بحجم مختلف.

HTML

<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>

إذا كان فقط رمز bootstrap. لاحظ أن الرموز تحت النص أو بالأحرى الطباعة. ما عليك سوى إضافة فئة لون النص مثل هذا. على سبيل المثال ، النص الأساسي ، معلومات النص ، وهكذا دواليك إلى فئة الرمز:

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

ببساطة تطبيق فئة text-success Bootstrap 3 على أيقونة:

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

يوجد المزيد من الألوان: وثائق Bootstrap: فئات المساعد
(الأزرق موجود أيضا)


بالنسبة لـ bootstrap 3.0 ، كان هذا مفيدًا بالنسبة لي:

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




twitter-bootstrap-2