UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36

Steps to reproduce the problem:
Sample at https://jsfiddle.net/davmillar/b93jctyd/7/

1. Create a page with fontawesome available as a webfont.
2. Create a class that adds a ::before pseudo-element with a desired character and using the fontawesome font.
3. Create a container whose ::first-line changes the font size, and add an element with the previously-defined class to the container, and one outside for comparison.

What is the expected behavior?
Both classed elements display the intended icon.

What went wrong?
The element inside the container does not render correctly due to the first-line bit.

Attachment ending in 13-51 is Firefox Quantum 61.0.
Attachment ending in 14-05 is Chrome 67.0.3396.87
{"arch":"x86-64","nacl_arch":"x86-64","os":"linux"}

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 67.0.3396.87  Channel: stable
OS Version: Fedora 28
Flash Version: 

Adding a line break to push the classed element outside of the first line causes the classed element to display with the correct font.

Works similarly with non-icon webfonts and plain chars e.g. ABC. See https://jsfiddle.net/davmillar/b93jctyd/11/

Attachment ending in 22-22 is Firefox Quantum 61.0.
Attachment ending in 22-05 is Chrome 67.0.3396.87
{"arch":"x86-64","nacl_arch":"x86-64","os":"linux"}
 

Deleted: Screenshot from 2018-07-10 17-13-51.png 8.6 KB

	Screenshot from 2018-07-10 17-13-51.png 8.6 KB View Download

Deleted: Screenshot from 2018-07-10 17-14-05.png 6.6 KB

	Screenshot from 2018-07-10 17-14-05.png 6.6 KB View Download

Deleted: Screenshot from 2018-07-10 17-22-05.png 39.5 KB

	Screenshot from 2018-07-10 17-22-05.png 39.5 KB View Download

Deleted: Screenshot from 2018-07-10 17-22-22.png 37.1 KB

	Screenshot from 2018-07-10 17-22-22.png 37.1 KB View Download