0

I am using Font Awesome icon with Bootstrap button classes and some CSS to create circle buttons: check my CSSDesk. I moved from default Bootstrap to Bootswatch Paper and I had to override paddings:

td > .btn-sm.btn-circle {
padding: 6px 12px !important;
}

To force the same behavior like in my CSSDesk. But when I want to use fa-user-plus icon I found that this icon is wider than others, and then buttons is like ellipse not like circle and I need to override right padding with new value. Can I achieve it with CSS selector which change buttons only if it has child with fa-user-plus class? Something like this:

td > .btn-sm.btn-circle:with-child(.fa-user-plus) {...}

Is in CSS a way to do something like this? Thank you in advance for spending time to help me.

Radek Anuszewski
  • 1,620
  • 6
  • 28
  • 56

1 Answers1

1

Unfortunately, to my knowledge there is no :with-child type selector in css. What you could do is use javascript to determine if .btn-sm.btn-circle has the child .fa-user-plus and then add a new class to .btn-sm.btn-circle. Then use css to generate your style as such:

td > .btn-sm.btn-circle.has-fa-user-plus {/*do stuff*/}
dgas02
  • 88
  • 1
  • 7