Document that @import-ing Bootstrap can break the icon font path

Addresses part of #13429.

1 files changed, 4 insertions, 0 deletions

diff --git a/docs/_includes/components/glyphicons.html b/docs/_includes/components/glyphicons.html
index 18f202372..f93d0ec6a 100644
--- a/docs/_includes/components/glyphicons.html
+++ b/docs/_includes/components/glyphicons.html
@@ -30,6 +30,10 @@
     <p>By default, Bootstrap assumes that the icon font files will be located in the <code>../fonts/</code> directory relative to your deployed CSS. For example, if your CSS file is at <code>http://example.com/foobar/css/bootstrap.css</code>, then your font files should be at <code>http://example.com/foobar/fonts/glyphicons-halflings-regular.woff</code>, etc.</p>
     <p>If you are placing the icon font files elsewhere or changing their filenames, you will need to adjust the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> Less variables accordingly.</p>
   </div>
+  <div class="bs-callout bs-callout-info">
+    <h4><code>@import</code>ing Bootstrap via Less may require adjusting the icon font location</h4>
+    <p>If you <code>@import</code> Bootstrap's Less source into your own Less file, you may need to adjust the <code>@icon-font-path</code> Less variable due to the way that relative paths in <code>url(...)</code>s work in Less.</p>
+  </div>
 {% highlight html %}
 <span class="glyphicon glyphicon-search"></span>
 {% endhighlight %}