Combining fontawesome icons

crisg0112

Hi,

<span class="fa-stack fa-3x">
  <i class="fa fa-calendar-o fa-stack-2x"></i>
  <strong class="fa-stack-1x calendar-text">29</strong>
</span>

How can I create this in a css and then use it as a toolbar icon in aware?

PointsWell

I am working on figuring this out. I have gotten half of the way:

The following is meant to be a concatenation of the phone and plus icons:

.fa-phone-plus:before {
content: "\f095";
}
.fa-phone-plus:after {
content: "\f067";
position: absolute;
font-size: 0.5em
}

Screen Shot 2017-09-05 at 13.39.06.png

It's not perfect as it starts to cut off the phone on the left. But at the moment it does what I need it to do.

pureist

FYI, some CSS Selectors should strictly speaking have a double colon...
https://www.w3schools.com/cssref/css_selectors.asp
::before and ::after are two of them.

Seems to work fine in the following without Absolute:
https://www.w3schools.com/code/tryit.asp?filename=FJ9TLC20LP9C

PointsWell

pureist wrote
FYI, some CSS Selectors should strictly speaking have a double colon...
https://www.w3schools.com/cssref/css_selectors.asp
::before and ::after are two of them.

Thanks - didn't know that. I've been copying and pasting to test and there's obviously a lot of non compliant code out there!

pureist wrote
Seems to work fine in the following without Absolute:
https://www.w3schools.com/code/tryit.asp?filename=FJ9TLC20LP9C

.fa-phone-plus {
	position: relative;
}

.fa-phone-plus::before {
	font-size: 0.85em !important;
	content: "\f095";
	margin-bottom: 0;
}
.fa-phone-plus::after {
	content: "\f055";
	display: block;
	font-size: 0.5em;
	margin-top: -120%;
	margin-left: 50%;
}

This attempts to better fit the icon into the 16x16px space (not brilliantly successful, but an improvement on the one above). I'm not a CSS guru, so it's a look at other code and trial and error outcome.

Screen Shot 2017-09-05 at 13.39.06.png