脚本宝典收集整理的这篇文章主要介绍了

在vue中使用FontAwesomeIcon

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>最近在写nw与vue结合的桌面应用,vue使用了elementUI,可惜elementUI的icon太太太丑太少(一直很好奇为什么elementUI的star比iview多),于是使用了牛逼的FontAwesomeIcon,去百度查了一下怎样在vue中用FontAwesomeIcon,查到几篇试了一下总是出现奇怪的警告,于是根据警告去谷歌查了一下,一直很好奇那些复制粘贴别人文章的人是什么心理,繁体的你给翻译成简体,在各个网站复制粘贴,一气之下去官网查了,以下是解决方案:<br />第一步</p> <ol> <li>npm i --save @fortawesome/fontawesome-svg-core</li> <li>npm i --save @fortawesome/free-solid-svg-icons</li> <li>npm i --save @fortawesome/vue-fontawesome</li> </ol> <p>第二部</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" import { library } from '@fortawesome/fontawesome-svg-core' import { faCoffee } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faCoffee) Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.config.productionTip = false " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code> <span class="hljs-section">import</span> { <span class="hljs-attribute">library</span> } from <span class="hljs-string">'<span class="hljs-variable">@fortawesome</span>/fontawesome-svg-core'</span> import { <span class="hljs-attribute">faCoffee</span> } from <span class="hljs-string">'<span class="hljs-variable">@fortawesome</span>/free-solid-svg-icons'</span> import { <span class="hljs-attribute">FontAwesomeIcon</span> } from <span class="hljs-string">'<span class="hljs-variable">@fortawesome</span>/vue-fontawesome'</span> library.add(faCoffee) <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.component(<span class="hljs-string">'font-awesome-icon'</span>, FontAwesomeIcon) Vue.config.productionTip = <span class="hljs-literal">false</span> </code></pre> <p>第三步</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <template></p> <div id=&quot;app&quot;> <font-awesome-icon icon=&quot;coffee&quot; ></font-awesome-icon> </div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'App' } </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">font-awesome-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"coffee"</span> /&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'App'</span> } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>完成,很简单,拜托那些人不要再复制粘贴误人子弟!</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

在vue中使用FontAwesomeIcon

全部内容,希望文章能够帮你解决

在vue中使用FontAwesomeIcon

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过