Fylo dark with Bootstrap

Community feedback

• 

  jemeneradev•580

  @jemeneradevPosted almost 4 years ago

  I haven't taken up this challenge, yet. But.

  Are the icons svg? Did you reference them in (ie. link to) or did you inline them? Because if you inline them, then you can set the fill,stroke color to "currentColor", which lets you change their color using the "color" property.

  For example: svg:hover { color: somecoolcolor}.

  If you you link to svg, then this trick does not apply.

  SVG's is an entire universe on its own. Consider checking out Sara Soueidan's work.

  1

  ---

  

  P

  mi souto•105

  @mileinePosted almost 4 years ago

  @jemeneradev I could not resist replying to this comment. 🙃 I agree SVG is an entire universe on its own. Sara Soueidan and Sarah Drasner have amazing stuff done using SVG. ✨✨✨

  Here are some links to their talks:

  • Sara Soueidan - Building Better Interfaces With SVG
  • SVG can do that?! (Sarah Drasner)

  1

  

  Alice•100

  @alicemac93Posted almost 4 years ago

  thank you guys for the suggestions! I'll have a bit of study about SVG today, thank you for the links (and comment below as well)! You've been really helpful !

  Alice

  1

  

  jemeneradev•580

  @jemeneradevPosted almost 4 years ago

  @mileine I didn't mention Sarah Drasner because svg animation is more her expertise. Both are amazing in their craft, and wonderful inspirations sources from which to draw from.

  0
• 

  P

  mi souto•105

  @mileinePosted almost 4 years ago

  Hey, Alice! Great work! 😊

  This is how your HTML code is structured:

  <div class="circle">
      <a href=""><i class="fab fa-facebook-f"></i></a>
   </div>
  

  I noticed you're changing the circle color on hover using .circle:hover. That's working as expected.✅

  Your <i> icon element is not updated because it's inheriting the <a> element. And the <a> element only changes when hover is on itself. Probably because it's inheriting this other rule that is applied on your <a> element on hover:

      color: #0056b3; 
  

  (note that the blue on the symbol is different from the blue on the circle)

  You want the child element <a> color to be updated at the same time as the circle so you need to add a new rule for this element color to change when the hover is on the the parent element - <div class="circle">.

  This rule would be something like this:

  parent:hover child {
         color: hover-color
  }
  

  I hope this helps. Happy coding! 💻✨😊

  0