<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="177813" data-post-id="177813">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="grantwest" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grantwest/120/36785_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  grantwest
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I followed the steps suggested by <a class="mention" href="/u/belgoros" rel="nofollow">@belgoros</a>, but my icons are not rendering. I just get a little box with the hex codes for the icons. Webpack is running without errors, but I don’t think the browser is loading the fonts. I think the issue is the <code>@font-face</code> section in my css, which looks like this:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">@font-face {
 font-family:'Font Awesome 5 Free';
 font-style:normal;
 font-weight:400;
 font-display:block;
 src:url([object Object]);
 src:url("[object Object]?#iefix") format("embedded-opentype"),
 url([object Object]) format("woff2"),
 url([object Object]) format("woff"),
 url([object Object]) format("truetype"),
 url("[object Object]#fontawesome") format("svg")
}
</code></pre>
<p>It looks like webpack is not putting in the URL for the fonts correctly. I barely understand how webpack works, and I’ve already been banging my head against this for too long. Maybe someone has a suggestion?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="177813" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-include-fontawesome-in-phoenix-app/21749/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-177813" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="177813"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="177816" data-post-id="177816">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="thojanssens1" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/thojanssens1/120/17642_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  thojanssens1
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Just do never integrate FontAwesome through one of their CDN, their Kit, their font, or whatnot. It’s terrible.</p>
<p>Last time I tried to integrate FA into my website, through the official recommended way, it drastically decreased my page’s loading time. Just because I was using 3 icons. The Network tabs showed a huge number of requests being made. Your page should never suffer because of some icons, this is not acceptable, and it happened to many people =&gt; google performance issue with FA integration.</p>
<p>Either they don’t care too much about free users, or they have (had?) a bug. This happens to free users only. In any case, trust lost.</p>
<p>Use a tool like Icomoon for example, and you can only package the few icons your app needs. But make sure to check the licence for FA icons; using directly their SVG is restricted to some paid subscription. But for me there’s no other way, lesson learned.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="177816" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-include-fontawesome-in-phoenix-app/21749/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-177816" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="177816"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="182681" data-post-id="182681">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="itssasanka" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  itssasanka
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I did integrate FontAwesome in my project very differently.<br>
It seems that Phoenix(1.5.0) already shipped with <code>webpack</code> along with a bunch of loaders like <code>node-sass</code>, <code>css-loader</code>, etc.<br>
I downloaded the <code>fontawesome</code> zip as a whole and dumped the <code>scss</code> and <code>webfonts</code> folders in my <code>/assets/css</code> directory so it looks like this</p>
<p><code>proj/assets/css/fontawesome/scss/&lt;all scss files&gt;</code><br>
<code>proj/assets.css/fontawesome/webfonts/&lt;all webfonts files&gt;</code></p>
<p>Next, I had to go to my <code>app.scss</code> and load fontAwesome.<br>
I also had to specify the <code>$fa-font-path</code> before doing the imports above since I am using a customized directory structure and FontAwesome needs to load <code>webfonts</code> to make it work:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">$fa-font-path: "./font-awesome/webfonts";
@import "./font-awesome/scss/fontawesome";
@import "./font-awesome/scss/solid";
</code></pre>
<p>Next, Webpack complained it was missing a couple of loaders that help with loading fonts?<br>
so I had to install them like this:<br>
<code>npm install --save-dev url-loader</code><br>
<code>npm install --save-dev file-loader</code></p>
<p>And that is it. It started working now.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="182681" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-include-fontawesome-in-phoenix-app/21749/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-182681" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="182681"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="182735" data-post-id="182735">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="eahanson" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/eahanson/120/20895_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  eahanson
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>An update on a <a href="https://forum.elixirforum.com/t/how-to-include-fontawesome-in-phoenix-app/21749/9" rel="nofollow">post I made in this thread</a> a while ago:</p>
<p>I stopped using PhoenixInlineSVG and now just stick FontAwesome SVGs in an “icons” directory inside the “templates” directory as a .svg.eex file and render them the way I’d render any template. I currently use one of FontAwesome’s CSS files to style the icons.</p>
<p>It’s simple and flexible and doesn’t require any fonts or JS.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="182735" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-include-fontawesome-in-phoenix-app/21749/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-182735" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="182735"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="189572" data-post-id="189572">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="patrickdm" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/patrickdm/120/7579_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  patrickdm
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hello <a class="mention" href="/u/grantwest" rel="nofollow">@grantwest</a>, I’ve been facing the same issue (this last very annoying hours)</p>
<aside class="quote no-group" data-username="grantwest" data-post="12" data-topic="21749">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grantwest/48/36785_2.png" class="avatar"> grantwest:</div>
<blockquote>
<p>just get a little box</p>
</blockquote>
</aside>
<p>and thanks to your hint about that oddly looking<br>
<code>src:url([object Object]); </code></p>
<p>I’ve found a <a href="https://stackoverflow.com/questions/57671995/webpack-4-gives-background-urlobject-module-as-bg-image" rel="noopener nofollow ugc">S.O. answer</a> pointing to a solution:<br>
adding <code>esModule: false</code> to the file-loader option in webpack.config.js.</p>
<p>I suppose it’s a bit late and you’ll have already fixed that, but for others (and my future self) sanity I’m dropping it here anyway <img src="https://forum.elixirforum.com/images/emoji/apple/laughing.png?v=15" title=":laughing:" class="emoji" alt=":laughing:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="189572" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-include-fontawesome-in-phoenix-app/21749/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-189572" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="189572"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="231890" data-post-id="231890">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="almouattaz" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/almouattaz/120/24864_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  almouattaz
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>When trying to have Font Awesome in your Pheonix app, what you are really looking for is a Pheonix app that can use external fonts, css etc…<br>
In 1.6, esbuild is capable of that, but not with the default configuration <strong>mix phx.new</strong> uses to scaffold your fresh app.<br>
I found this Gist extremely useful: <a href="https://gist.github.com/ks2211/75af6cddc051f5e261a29fc25eed5789" rel="noopener nofollow ugc"> ks2211/Phoenix esbuild with Tailwind and Fontawesome</a><br>
If you need a working sample of a Pheonix 1.6 fresh app working with Font Awesome, check out  my public repo <a href="https://github.com/almouattaz/SamplePheonix1.6" rel="noopener nofollow ugc">almouattaz / SamplePheonix1.6</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="231890" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-include-fontawesome-in-phoenix-app/21749/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-231890" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="231890"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>