Question

Photo of Dan Abbuhl

0

How do you colorize a lava badge

4

I created a new Badge for a class that new people take at our church before they are members. 

I was able to look at the Baptism badge and basically copy that and create a trigger that works in the member area just like the baptism.  So when someone finishes the classes and you place the date in the field, the badge turns on like the baptism badge goes from gray to colored.   I want to colorize the new badge like the baptism badge goes from gray to blue.  I want to colorize the new badge to go from gray to Teal.  I don't see in the Baptism badge how the badge is changed from fa-tint (which is the font awesome vector graphic of a water drop) to blue instead of plain black. 

Here is the code that is used:

{% assign baptismDate = Person | Attribute:'BaptismDate' %}
  {% if baptismDate != '' -%}
    <div class="badge badge-baptism" data-toggle="tooltip" data-original-title="{{ Person.NickName }} was baptized on {{ baptismDate }}.">
      <i class="badge-icon fa fa-tint"></i>
    </div>
  {% else -%}
    <div class="badge badge-baptism" data-toggle="tooltip" data-original-title="No baptism date entered for {{ Person.NickName }}.">
      <i class="badge-icon badge-disabled fa fa-tint"></i>
    </div>
{% endif -%}

which creates this:

imgur.com

I don't see how the fa-tint is colored.  How Do I replicate this?

Here is the code I'm using and the results:

{% assign 3GDate = Person | Attribute:'3GClass' %}
{% if 3GDate != '' -%}
  <div class="badge badge-3G" data-toggle="tooltip" data-original-title="{{ Person.NickName }} completed 3G classes on {{ 3GDate }}.">
    <i class="badge-icon fa fa-google"></i>
  </div>
{% else -%}
  <div class="badge badge-3G" data-toggle="tooltip" data-original-title="3G classes not completed for {{ Person.NickName }}.">
    <i class="badge-icon badge-disabled fa fa-google"></i>
  </div>
{% endif -%}

I want to make the fa-google a teal color.  How can this be done?


edited administratively for formatting so we could answer. Please let us know if this editing has unintentionally changed the nature of your question =)

  • Photo of Michael Garrison

    0

    The baptism icon is colored using the badge-baptism class, or the badge-disabled class. You can either define and use a similar class or (and this is much easier) include something like

    style="color:#008080"

    in your <i> element(s) which you want to be teal.

    It looks like you're calling a badge-3g class on your element. If you haven't actually defined that in CSS on your page, you don't need that class (though that would be the other option for colorizing your badge).

    Your final output might be something like: 
    {% assign 3GDate = Person | Attribute:'3GClass' %}
{% if 3GDate != '' -%}
  <div class="badge" data-toggle="tooltip" data-original-title="{{ Person.NickName }} completed 3G classes on {{ 3GDate }}.">
    <i class="badge-icon fa fa-google" style="color:#008080"></i>
  </div>
{% else -%}
  <div class="badge" data-toggle="tooltip" data-original-title="3G classes not completed for {{ Person.NickName }}.">
    <i class="badge-icon badge-disabled fa fa-google"></i>
  </div>
{% endif -%}
  • Photo of DJ Grick

    1

    Check this out: https://fontawesome.com/how-to-use/web-fonts-with-css

    You treat them like a font basically. 

  • Photo of Daniel Hazelbaker

    0

    Add `style="color: teal"` to the fontawesome declaration, example:

    <i class="badge-icon fa fa-google" style="color: teal"></i>

  • Photo of Dan Abbuhl

    0

    Thank you everyone.  This works.  Adding the   

    style="color:#008080"

    did the job.