One important thing to bear in mind is that from the point you use <Content>
should not be relied upon.
block gives the developer freedom to add arbitrary HTML code within its premises. But also the responsibility to keep the layout therein.
That said, you should rely on <Items>
block whenever you want Ext.NET to deal with the layout. Mixing both block types is not possible in the same component, and so on. Well, if you want to know more about it, let us know, or just do a search in the forums for various topics we have covering this subject.
Now, as for centering the glyph in the container, here are two alternatives into getting it the way you need:
1. Style a bare component, rely on Ext.NET for layout:
<ext:Container runat="server" Width="100" Height="100" Layout="CenterLayout" StyleSpec="background-color:orange">
<ext:Component runat="server" Cls="x-fa fa-compass fa-5x" />
2. Keep using the container and the "i" tag
<ext:Container runat="server" StyleHtmlContent="true" UserCls="blok">
<div style="width: 200px; height:200px; border: 1px solid red; background-color: orange; display:grid; align-content:center">
<i style="text-align: center" class="x-fa fa-compass fa-5x"></i>
Notice now how the width/height is relied upon the internal div within the component in the second solution. These are not necessarily the best ever possible solution, they are just two solutions highlighting different approaches of attaining the objective of centering the content within a container.
Hope this helps!