Okay, I can't guarantee this will work with font awesome and RH2020, but in theory it should. It worked when I was trying it out with 2019 and images located in the project. Hopefully you can get it set up with font awesome.
The theory uses @ media print statements to provide additional styling for the word output, a class on the p tag in the code you provided, and a stylesheet so you can map your style.
1. On the p tag in your code, include a class "hint-box".
2. In your stylesheet, include the following code. I'm not certain how important it is to include it, but it's not a bad fallback, in case.
@media print {
p.hint-box
{
[insert your background colour and border styling here]
}
}
Insert the background colour and border that's on your box in the web output inside the curly brackets where indicated.
3. Create a Word template and define a paragraph style 'hint-box'.
Define a similar border and shading to your box for the web output.
Also define a bullet using the Numbering option in the dialog box. I'm not 100% sure how to do this bit for font awesome. When I was doing it I had an image of the icon I was using (not font awesome). Maybe you can install the font set and select the correct symbol? Or maybe they provide image downloads? I haven't used it so not sure of the options.
4. In your output preset, go to the Word section and map the p.hint-box style to the hint-box style in Word.
This *should* result in a paragraph with a bullet, border and background that is similar to your font awesome divs in the web output.
Sorry for the fairly brief description. My PC with RH2020 doesn't have Word on it, and my PC with Word only has RH2019. I'll recheck the Word instructions tomorrow and provide any extra detail if this is not enough info for you.
Hopefully this is enough to get you started, anyway.
AdChoices