Thanks again, @nirgrahamuk. Your example works!
Just a minor formatting question that maybe you or someone else can help with: in your original example, the dots and labels showed up at different heights than the check boxes, like this:

I added margin-top:3px; after e.g. color:lightblue; which fixed the height of the dots nicely:

But the text labels are still not aligned. Playing around with margin-top and margin-bottom for the text labels didn't do anything. Sorry if this is obvious--I haven't worked with html before. Do you know how I might fix the alignment?
Reprex is here (lightly modified from your original)
library(shiny)
library(htmltools )
ui <- fluidPage(
div( htmlDependency("font-awesome",
"5.13.0", "www/shared/fontawesome", package = "shiny",
stylesheet = c("css/all.min.css", "css/v4-shims.min.css")),
p("some text"),
checkboxGroupInput(inputId = "mybuttons",
label="styled choices",
choiceNames = list(HTML('<div style="display:flex"><i class="fa fa-circle"
style="color:lightblue;margin-top:3px;"></i><div style="color:black;padding:5px;">1</div></div>'),
HTML('<div style="display:flex"><i class="fa fa-circle"
style="color:blue;margin-top:3px;"></i><div style="color:black;padding:5px;">2</div></div>'),
HTML('<div style="display:flex"><i class="fa fa-circle"
style="color:darkblue;margin-top:3px;"></i><div style="color:black;padding:5px;">3</div></div>')),
choiceValues= letters[1:3],
selected = letters[1:3])
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)