javascript-font-awesome使用React和Webpack不显示图标(仅正方形)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript-font-awesome使用React和Webpack不显示图标(仅正方形)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含21607字，纯文字阅读大概需要31分钟。
内容图文
我正在尝试对React和Webpack使用超棒的字体.我已经使用npm安装了font-awesome：
npm install font-awesome --save
我已经正确配置了webpack,可以看到Webpack正在加载font-awesome并将其捆绑在我的bundle.js中：
$npm run hot
> webpack-dev-server --inline --hot
http://localhost:8080/
webpack result is served from /dist
content is served from D:\DEV
webpack: wait until bundle finished: /dist/bundle.js
Hash: 81a27e2b33864a94773b
Version: webpack 1.14.0
Time: 2909ms
Asset Size Chunks Chunk Names
674f50d287a8c48dc19ba404d20fe713.eot 166 kB [emitted]
f4769f9bdb7466be65088239c12046d1.eot 20.1 kB [emitted]
fa2772327f55d8198301fdb8bcfc8158.woff 23.4 kB [emitted]
e18bbf611f2a2e43afc071aa2f4e1512.ttf 45.4 kB [emitted]
89889688147bd7575d6327160d64e760.svg 109 kB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 18 kB [emitted]
af7ae505a9eed503f8b8e6982036873e.woff2 77.2 kB [emitted]
fee66e712a8a08eef5805a46892932ad.woff 98 kB [emitted]
b06871f281fee6b241d60582ae9369b9.ttf 166 kB [emitted]
912ec66d7572ff821749319396470bde.svg 444 kB [emitted]
bundle.js 1.83 MB 0 [emitted] main
chunk {0} bundle.js (main) 1.74 MB [rendered]
[0] multi main 52 bytes {0} [built]
[1] (webpack)-dev-server/client?http://localhost:8080 3.97 kB {0} [built]
[2] ./~/url/url.js 23.3 kB {0} [built]
[3] ./~/url/~/punycode/punycode.js 14.6 kB {0} [built]
[4] (webpack)/buildin/module.js 251 bytes {0} [built]
[5] ./~/url/util.js 314 bytes {0} [built]
[6] ./~/querystring/index.js 127 bytes {0} [built]
[7] ./~/querystring/decode.js 2.4 kB {0} [built]
[8] ./~/querystring/encode.js 2.09 kB {0} [built]
[9] ./~/strip-ansi/index.js 161 bytes {0} [built]
[10] ./~/ansi-regex/index.js 135 bytes {0} [built]
[11] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[12] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
[13] ./~/sockjs-client/lib/transport-list.js 613 bytes {0} [built]
[14] ./~/sockjs-client/lib/transport/websocket.js 2.71 kB {0} [built]
[15] ./~/process/browser.js 5.3 kB {0} [built]
[16] ./~/sockjs-client/lib/utils/event.js 2 kB {0} [built]
[17] ./~/sockjs-client/lib/utils/random.js 746 bytes {0} [built]
[18] ./~/sockjs-client/lib/utils/browser-crypto.js 438 bytes {0} [built]
[19] ./~/sockjs-client/lib/utils/url.js 975 bytes {0} [built]
[20] ./~/url-parse/index.js 9.92 kB {0} [built]
[21] ./~/requires-port/index.js 753 bytes {0} [built]
[22] ./~/url-parse/lolcation.js 1.58 kB {0} [built]
[23] ./~/querystringify/index.js 1.3 kB {0} [built]
[24] ./~/debug/browser.js 3.76 kB {0} [built]
[25] ./~/debug/debug.js 4.1 kB {0} [built]
[26] ./~/ms/index.js 2.33 kB {0} [built]
[27] ./~/inherits/inherits_browser.js 672 bytes {0} [built]
[28] ./~/sockjs-client/lib/event/emitter.js 1.27 kB {0} [built]
[29] ./~/sockjs-client/lib/event/eventtarget.js 1.85 kB {0} [built]
[30] ./~/sockjs-client/lib/transport/browser/websocket.js 172 bytes {0} [built]
[31] ./~/sockjs-client/lib/transport/xhr-streaming.js 1.25 kB {0} [built]
[32] ./~/sockjs-client/lib/transport/lib/ajax-based.js 1.31 kB {0} [built]
[33] ./~/sockjs-client/lib/transport/lib/sender-receiver.js 1.15 kB {0} [built]
[34] ./~/sockjs-client/lib/transport/lib/buffered-sender.js 2.3 kB {0} [built]
[35] ./~/sockjs-client/lib/transport/lib/polling.js 1.32 kB {0} [built]
[36] ./~/sockjs-client/lib/transport/receiver/xhr.js 1.58 kB {0} [built]
[37] ./~/sockjs-client/lib/transport/sender/xhr-cors.js 343 bytes {0} [built]
[38] ./~/sockjs-client/lib/transport/browser/abstract-xhr.js 4.8 kB {0} [built]
[39] ./~/sockjs-client/lib/transport/sender/xhr-local.js 352 bytes {0} [built]
[40] ./~/sockjs-client/lib/utils/browser.js 560 bytes {0} [built]
[41] ./~/sockjs-client/lib/transport/xdr-streaming.js 984 bytes {0} [built]
[42] ./~/sockjs-client/lib/transport/sender/xdr.js 2.46 kB {0} [built]
[43] ./~/sockjs-client/lib/transport/eventsource.js 766 bytes {0} [built]
[44] ./~/sockjs-client/lib/transport/receiver/eventsource.js 1.58 kB {0} [built]
[45] ./~/sockjs-client/lib/transport/browser/eventsource.js 37 bytes {0} [built]
[46] ./~/sockjs-client/lib/transport/lib/iframe-wrap.js 981 bytes {0} [built]
[47] ./~/sockjs-client/lib/transport/iframe.js 3.83 kB {0} [built]
[48] ./~/json3/lib/json3.js 43.3 kB {0} [built]
[49] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
[50] ./~/sockjs-client/lib/version.js 26 bytes {0} [built]
[51] ./~/sockjs-client/lib/utils/iframe.js 5.06 kB {0} [built]
[52] ./~/sockjs-client/lib/utils/object.js 532 bytes {0} [built]
[53] ./~/sockjs-client/lib/transport/htmlfile.js 710 bytes {0} [built]
[54] ./~/sockjs-client/lib/transport/receiver/htmlfile.js 2.2 kB {0} [built]
[55] ./~/sockjs-client/lib/transport/xhr-polling.js 894 bytes {0} [built]
[56] ./~/sockjs-client/lib/transport/xdr-polling.js 712 bytes {0} [built]
[57] ./~/sockjs-client/lib/transport/jsonp-polling.js 1.02 kB {0} [built]
[58] ./~/sockjs-client/lib/transport/receiver/jsonp.js 5.57 kB {0} [built]
[59] ./~/sockjs-client/lib/transport/sender/jsonp.js 2.46 kB {0} [built]
[60] ./~/sockjs-client/lib/main.js 11.9 kB {0} [built]
[61] ./~/sockjs-client/lib/shims.js 18.2 kB {0} [built]
[62] ./~/sockjs-client/lib/utils/escape.js 2.31 kB {0} [built]
[63] ./~/sockjs-client/lib/utils/transport.js 1.35 kB {0} [built]
[64] ./~/sockjs-client/lib/utils/log.js 450 bytes {0} [built]
[65] ./~/sockjs-client/lib/event/event.js 477 bytes {0} [built]
[66] ./~/sockjs-client/lib/location.js 177 bytes {0} [built]
[67] ./~/sockjs-client/lib/event/close.js 295 bytes {0} [built]
[68] ./~/sockjs-client/lib/event/trans-message.js 292 bytes {0} [built]
[69] ./~/sockjs-client/lib/info-receiver.js 2.22 kB {0} [built]
[70] ./~/sockjs-client/lib/transport/sender/xhr-fake.js 456 bytes {0} [built]
[71] ./~/sockjs-client/lib/info-iframe.js 1.52 kB {0} [built]
[72] ./~/sockjs-client/lib/info-iframe-receiver.js 791 bytes {0} [built]
[73] ./~/sockjs-client/lib/info-ajax.js 1.03 kB {0} [built]
[74] ./~/sockjs-client/lib/iframe-bootstrap.js 2.9 kB {0} [built]
[75] ./~/sockjs-client/lib/facade.js 723 bytes {0} [built]
[76] (webpack)/hot/dev-server.js 1.85 kB {0} [built]
[77] (webpack)/hot/log-apply-result.js 813 bytes {0} [built]
[78] ./client/app.js 770 bytes {0} [built]
[79] ./~/react/react.js 56 bytes {0} [built]
[80] ./~/react/lib/React.js 2.69 kB {0} [built]
[81] ./~/object-assign/index.js 2.11 kB {0} [built]
[82] ./~/react/lib/ReactChildren.js 6.19 kB {0} [built]
[83] ./~/react/lib/PooledClass.js 3.36 kB {0} [built]
[84] ./~/react/lib/reactProdInvariant.js 1.24 kB {0} [built]
[85] ./~/fbjs/lib/invariant.js 1.63 kB {0} [built]
[86] ./~/react/lib/ReactElement.js 11.2 kB {0} [built]
[87] ./~/react/lib/ReactCurrentOwner.js 623 bytes {0} [built]
[88] ./~/fbjs/lib/warning.js 2.1 kB {0} [built]
[89] ./~/fbjs/lib/emptyFunction.js 1.08 kB {0} [built]
[90] ./~/react/lib/canDefineProperty.js 661 bytes {0} [built]
[91] ./~/react/lib/ReactElementSymbol.js 622 bytes {0} [built]
[92] ./~/react/lib/traverseAllChildren.js 7.03 kB {0} [built]
[93] ./~/react/lib/getIteratorFn.js 1.12 kB {0} [built]
[94] ./~/react/lib/KeyEscapeUtils.js 1.29 kB {0} [built]
[95] ./~/react/lib/ReactComponent.js 4.61 kB {0} [built]
[96] ./~/react/lib/ReactNoopUpdateQueue.js 3.36 kB {0} [built]
[97] ./~/fbjs/lib/emptyObject.js 458 bytes {0} [built]
[98] ./~/react/lib/ReactPureComponent.js 1.32 kB {0} [built]
[99] ./~/react/lib/ReactClass.js 26.5 kB {0} [built]
[100] ./~/react/lib/ReactPropTypeLocationNames.js 572 bytes {0} [built]
[101] ./~/react/lib/ReactDOMFactories.js 5.53 kB {0} [built]
[102] ./~/react/lib/ReactElementValidator.js 8.32 kB {0} [built]
[103] ./~/react/lib/ReactComponentTreeHook.js 10.4 kB {0} [built]
[104] ./~/react/lib/checkReactTypeSpec.js 4.19 kB {0} [built]
[105] ./~/react/lib/ReactPropTypesSecret.js 442 bytes {0} [built]
[106] ./~/react/lib/ReactPropTypes.js 15.8 kB {0} [built]
[107] ./~/react/lib/ReactVersion.js 350 bytes {0} [built]
[108] ./~/react/lib/onlyChild.js 1.34 kB {0} [built]
[109] ./~/react-dom/index.js 59 bytes {0} [built]
[110] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
[111] ./~/react-dom/lib/ReactDOMComponentTree.js 6.27 kB {0} [built]
[112] ./~/react-dom/lib/reactProdInvariant.js 1.24 kB {0} [built]
[113] ./~/react-dom/lib/DOMProperty.js 8.24 kB {0} [built]
[114] ./~/react-dom/lib/ReactDOMComponentFlags.js 429 bytes {0} [built]
[115] ./~/react-dom/lib/ReactDefaultInjection.js 3.5 kB {0} [built]
[116] ./~/react-dom/lib/ARIADOMPropertyConfig.js 1.82 kB {0} [built]
[117] ./~/react-dom/lib/BeforeInputEventPlugin.js 13.3 kB {0} [built]
[118] ./~/react-dom/lib/EventPropagators.js 5.09 kB {0} [built]
[119] ./~/react-dom/lib/EventPluginHub.js 9.11 kB {0} [built]
[120] ./~/react-dom/lib/EventPluginRegistry.js 9.75 kB {0} [built]
[121] ./~/react-dom/lib/EventPluginUtils.js 7.95 kB {0} [built]
[122] ./~/react-dom/lib/ReactErrorUtils.js 2.25 kB {0} [built]
[123] ./~/react-dom/lib/accumulateInto.js 1.69 kB {0} [built]
[124] ./~/react-dom/lib/forEachAccumulated.js 855 bytes {0} [built]
[125] ./~/fbjs/lib/ExecutionEnvironment.js 1.06 kB {0} [built]
[126] ./~/react-dom/lib/FallbackCompositionState.js 2.43 kB {0} [built]
[127] ./~/react-dom/lib/PooledClass.js 3.36 kB {0} [built]
[128] ./~/react-dom/lib/getTextContentAccessor.js 955 bytes {0} [built]
[129] ./~/react-dom/lib/SyntheticCompositionEvent.js 1.1 kB {0} [built]
[130] ./~/react-dom/lib/SyntheticEvent.js 9.18 kB {0} [built]
[131] ./~/react-dom/lib/SyntheticInputEvent.js 1.09 kB {0} [built]
[132] ./~/react-dom/lib/ChangeEventPlugin.js 11.1 kB {0} [built]
[133] ./~/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
[134] ./~/react-dom/lib/CallbackQueue.js 3.16 kB {0} [built]
[135] ./~/react-dom/lib/ReactFeatureFlags.js 628 bytes {0} [built]
[136] ./~/react-dom/lib/ReactReconciler.js 6.21 kB {0} [built]
[137] ./~/react-dom/lib/ReactRef.js 2.56 kB {0} [built]
[138] ./~/react-dom/lib/ReactOwner.js 3.53 kB {0} [built]
[139] ./~/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]
[140] ./~/react-dom/lib/ReactDebugTool.js 11.7 kB {0} [built]
[141] ./~/react-dom/lib/ReactInvalidSetStateWarningHook.js 984 bytes {0} [built]
[142] ./~/react-dom/lib/ReactHostOperationHistoryHook.js 736 bytes {0} [built]
[143] ./~/fbjs/lib/performanceNow.js 845 bytes {0} [built]
[144] ./~/fbjs/lib/performance.js 588 bytes {0} [built]
[145] ./~/react-dom/lib/Transaction.js 9.45 kB {0} [built]
[146] ./~/react-dom/lib/getEventTarget.js 1.01 kB {0} [built]
[147] ./~/react-dom/lib/isEventSupported.js 1.94 kB {0} [built]
[148] ./~/react-dom/lib/isTextInputElement.js 1.04 kB {0} [built]
[149] ./~/react-dom/lib/DefaultEventPluginOrder.js 1.08 kB {0} [built]
[150] ./~/react-dom/lib/EnterLeaveEventPlugin.js 3.16 kB {0} [built]
[151] ./~/react-dom/lib/SyntheticMouseEvent.js 2.14 kB {0} [built]
[152] ./~/react-dom/lib/SyntheticUIEvent.js 1.57 kB {0} [built]
[153] ./~/react-dom/lib/ViewportMetrics.js 606 bytes {0} [built]
[154] ./~/react-dom/lib/getEventModifierState.js 1.23 kB {0} [built]
[155] ./~/react-dom/lib/HTMLDOMPropertyConfig.js 5.44 kB {0} [built]
[156] ./~/react-dom/lib/ReactComponentBrowserEnvironment.js 906 bytes {0} [built]
[157] ./~/react-dom/lib/DOMChildrenOperations.js 7.67 kB {0} [built]
[158] ./~/react-dom/lib/DOMLazyTree.js 3.71 kB {0} [built]
[159] ./~/react-dom/lib/DOMNamespaces.js 505 bytes {0} [built]
[160] ./~/react-dom/lib/setInnerHTML.js 3.86 kB {0} [built]
[161] ./~/react-dom/lib/createMicrosoftUnsafeLocalFunction.js 810 bytes {0} [built]
[162] ./~/react-dom/lib/setTextContent.js 1.45 kB {0} [built]
[163] ./~/react-dom/lib/escapeTextContentForBrowser.js 3.43 kB {0} [built]
[164] ./~/react-dom/lib/Danger.js 2.24 kB {0} [built]
[165] ./~/fbjs/lib/createNodesFromMarkup.js 2.66 kB {0} [built]
[166] ./~/fbjs/lib/createArrayFromMixed.js 4.11 kB {0} [built]
[167] ./~/fbjs/lib/getMarkupWrap.js 3.04 kB {0} [built]
[168] ./~/react-dom/lib/ReactDOMIDOperations.js 956 bytes {0} [built]
[169] ./~/react-dom/lib/ReactDOMComponent.js 38.5 kB {0} [built]
[170] ./~/react-dom/lib/AutoFocusUtils.js 599 bytes {0} [built]
[171] ./~/fbjs/lib/focusNode.js 704 bytes {0} [built]
[172] ./~/react-dom/lib/CSSPropertyOperations.js 6.87 kB {0} [built]
[173] ./~/react-dom/lib/CSSProperty.js 3.66 kB {0} [built]
[174] ./~/fbjs/lib/camelizeStyleName.js 1 kB {0} [built]
[175] ./~/fbjs/lib/camelize.js 708 bytes {0} [built]
[176] ./~/react-dom/lib/dangerousStyleValue.js 3.02 kB {0} [built]
[177] ./~/fbjs/lib/hyphenateStyleName.js 974 bytes {0} [built]
[178] ./~/fbjs/lib/hyphenate.js 800 bytes {0} [built]
[179] ./~/fbjs/lib/memoizeStringOnly.js 698 bytes {0} [built]
[180] ./~/react-dom/lib/DOMPropertyOperations.js 7.61 kB {0} [built]
[181] ./~/react-dom/lib/quoteAttributeValueForBrowser.js 700 bytes {0} [built]
[182] ./~/react-dom/lib/ReactBrowserEventEmitter.js 12.6 kB {0} [built]
[183] ./~/react-dom/lib/ReactEventEmitterMixin.js 959 bytes {0} [built]
[184] ./~/react-dom/lib/getVendorPrefixedEventName.js 2.87 kB {0} [built]
[185] ./~/react-dom/lib/ReactDOMInput.js 12.6 kB {0} [built]
[186] ./~/react-dom/lib/LinkedValueUtils.js 5.15 kB {0} [built]
[187] ./~/react-dom/lib/ReactPropTypesSecret.js 442 bytes {0} [built]
[188] ./~/react-dom/lib/ReactDOMOption.js 3.69 kB {0} [built]
[189] ./~/react-dom/lib/ReactDOMSelect.js 6.81 kB {0} [built]
[190] ./~/react-dom/lib/ReactDOMTextarea.js 6.46 kB {0} [built]
[191] ./~/react-dom/lib/ReactMultiChild.js 14.6 kB {0} [built]
[192] ./~/react-dom/lib/ReactComponentEnvironment.js 1.3 kB {0} [built]
[193] ./~/react-dom/lib/ReactInstanceMap.js 1.22 kB {0} [built]
[194] ./~/react-dom/lib/ReactChildReconciler.js 6.11 kB {0} [built]
[195] ./~/react-dom/lib/instantiateReactComponent.js 5.05 kB {0} [built]
[196] ./~/react-dom/lib/ReactCompositeComponent.js 35.2 kB {0} [built]
[197] ./~/react-dom/lib/ReactNodeTypes.js 1.02 kB {0} [built]
[198] ./~/react-dom/lib/checkReactTypeSpec.js 4.21 kB {0} [built]
[199] ./~/react-dom/lib/ReactPropTypeLocationNames.js 572 bytes {0} [built]
[200] ./~/fbjs/lib/shallowEqual.js 1.74 kB {0} [built]
[201] ./~/react-dom/lib/shouldUpdateReactComponent.js 1.4 kB {0} [built]
[202] ./~/react-dom/lib/ReactEmptyComponent.js 704 bytes {0} [built]
[203] ./~/react-dom/lib/ReactHostComponent.js 1.98 kB {0} [built]
[204] ./~/react-dom/lib/getNextDebugID.js 437 bytes {0} [built]
[205] ./~/react-dom/lib/KeyEscapeUtils.js 1.29 kB {0} [built]
[206] ./~/react-dom/lib/traverseAllChildren.js 7.04 kB {0} [built]
[207] ./~/react-dom/lib/ReactElementSymbol.js 622 bytes {0} [built]
[208] ./~/react-dom/lib/getIteratorFn.js 1.12 kB {0} [built]
[209] ./~/react-dom/lib/flattenChildren.js 2.77 kB {0} [built]
[210] ./~/react-dom/lib/ReactServerRenderingTransaction.js 2.29 kB {0} [built]
[211] ./~/react-dom/lib/ReactServerUpdateQueue.js 4.83 kB {0} [built]
[212] ./~/react-dom/lib/ReactUpdateQueue.js 9.01 kB {0} [built]
[213] ./~/react-dom/lib/validateDOMNesting.js 13.7 kB {0} [built]
[214] ./~/react-dom/lib/ReactDOMEmptyComponent.js 1.9 kB {0} [built]
[215] ./~/react-dom/lib/ReactDOMTreeTraversal.js 3.72 kB {0} [built]
[216] ./~/react-dom/lib/ReactDOMTextComponent.js 5.82 kB {0} [built]
[217] ./~/react-dom/lib/ReactDefaultBatchingStrategy.js 1.88 kB {0} [built]
[218] ./~/react-dom/lib/ReactEventListener.js 5.3 kB {0} [built]
[219] ./~/fbjs/lib/EventListener.js 2.67 kB {0} [built]
[220] ./~/fbjs/lib/getUnboundedScrollPosition.js 1.05 kB {0} [built]
[221] ./~/react-dom/lib/ReactInjection.js 1.2 kB {0} [built]
[222] ./~/react-dom/lib/ReactReconcileTransaction.js 5.26 kB {0} [built]
[223] ./~/react-dom/lib/ReactInputSelection.js 4.27 kB {0} [built]
[224] ./~/react-dom/lib/ReactDOMSelection.js 6.78 kB {0} [built]
[225] ./~/react-dom/lib/getNodeForCharacterOffset.js 1.62 kB {0} [built]
[226] ./~/fbjs/lib/containsNode.js 1.05 kB {0} [built]
[227] ./~/fbjs/lib/isTextNode.js 605 bytes {0} [built]
[228] ./~/fbjs/lib/isNode.js 693 bytes {0} [built]
[229] ./~/fbjs/lib/getActiveElement.js 895 bytes {0} [built]
[230] ./~/react-dom/lib/SVGDOMPropertyConfig.js 7.32 kB {0} [built]
[231] ./~/react-dom/lib/SelectEventPlugin.js 6.06 kB {0} [built]
[232] ./~/react-dom/lib/SimpleEventPlugin.js 7.97 kB {0} [built]
[233] ./~/react-dom/lib/SyntheticAnimationEvent.js 1.21 kB {0} [built]
[234] ./~/react-dom/lib/SyntheticClipboardEvent.js 1.17 kB {0} [built]
[235] ./~/react-dom/lib/SyntheticFocusEvent.js 1.07 kB {0} [built]
[236] ./~/react-dom/lib/SyntheticKeyboardEvent.js 2.71 kB {0} [built]
[237] ./~/react-dom/lib/getEventCharCode.js 1.5 kB {0} [built]
[238] ./~/react-dom/lib/getEventKey.js 2.87 kB {0} [built]
[239] ./~/react-dom/lib/SyntheticDragEvent.js 1.07 kB {0} [built]
[240] ./~/react-dom/lib/SyntheticTouchEvent.js 1.28 kB {0} [built]
[241] ./~/react-dom/lib/SyntheticTransitionEvent.js 1.23 kB {0} [built]
[242] ./~/react-dom/lib/SyntheticWheelEvent.js 1.94 kB {0} [built]
[243] ./~/react-dom/lib/ReactMount.js 25.5 kB {0} [built]
[244] ./~/react-dom/lib/ReactDOMContainerInfo.js 967 bytes {0} [built]
[245] ./~/react-dom/lib/ReactDOMFeatureFlags.js 439 bytes {0} [built]
[246] ./~/react-dom/lib/ReactMarkupChecksum.js 1.47 kB {0} [built]
[247] ./~/react-dom/lib/adler32.js 1.19 kB {0} [built]
[248] ./~/react-dom/lib/ReactVersion.js 350 bytes {0} [built]
[249] ./~/react-dom/lib/findDOMNode.js 2.46 kB {0} [built]
[250] ./~/react-dom/lib/getHostComponentFromComposite.js 740 bytes {0} [built]
[251] ./~/react-dom/lib/renderSubtreeIntoContainer.js 422 bytes {0} [built]
[252] ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js 4.32 kB {0} [built]
[253] ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js 1.37 kB {0} [built]
[254] ./~/react-dom/lib/ReactDOMInvalidARIAHook.js 3.14 kB {0} [built]
[255] ./client/components/Dashboard/Dashboard.js 3.68 kB {0} [built]
[256] ./client/components/Dashboard/TopHeader.js 4.71 kB {0} [built]
[257] ./client/components/Dashboard/Logo.js 3.38 kB {0} [built]
[258] ./client/components/Dashboard/Sidebar.js 5.77 kB {0} [built]
[259] ./~/font-awesome/css/font-awesome.css 918 bytes {0} [built]
[260] ./~/css-loader?sourceMap!./~/font-awesome/css/font-awesome.css 101 kB {0} [built]
[261] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[262] ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 82 bytes {0} [built]
[263] ./~/font-awesome/fonts/fontawesome-webfont.eot 82 bytes {0} [built]
[264] ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 84 bytes {0} [built]
[265] ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0 83 bytes {0} [built]
[266] ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 82 bytes {0} [built]
[267] ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0 82 bytes {0} [built]
[268] ./~/style-loader/addStyles.js 7.15 kB {0} [built]
[269] ./~/bootstrap/dist/css/bootstrap.css 921 bytes {0} [built]
[270] ./~/css-loader?sourceMap!./~/bootstrap/dist/css/bootstrap.css 357 kB {0} [built]
[271] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.eot 82 bytes {0} [built]
[272] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2 84 bytes {0} [built]
[273] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 83 bytes {0} [built]
[274] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf 82 bytes {0} [built]
[275] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.svg 82 bytes {0} [built]
[276] ./~/jquery/dist/jquery.js 267 kB {0} [built]
[277] ./~/bootstrap/dist/js/npm.js 484 bytes {0} [built]
[278] ./~/bootstrap/js/transition.js 1.83 kB {0} [built]
[279] ./~/bootstrap/js/alert.js 2.28 kB {0} [built]
[280] ./~/bootstrap/js/button.js 3.82 kB {0} [built]
[281] ./~/bootstrap/js/carousel.js 7.14 kB {0} [built]
[282] ./~/bootstrap/js/collapse.js 5.99 kB {0} [built]
[283] ./~/bootstrap/js/dropdown.js 4.74 kB {0} [built]
[284] ./~/bootstrap/js/modal.js 9.99 kB {0} [built]
[285] ./~/bootstrap/js/tooltip.js 16.7 kB {0} [built]
[286] ./~/bootstrap/js/popover.js 3.16 kB {0} [built]
[287] ./~/bootstrap/js/scrollspy.js 4.71 kB {0} [built]
[288] ./~/bootstrap/js/tab.js 3.9 kB {0} [built]
[289] ./~/bootstrap/js/affix.js 4.84 kB {0} [built]
webpack: bundle is now VALID.
webpack.config.js中的Webpack配置：
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: "./client/app.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js",
publicPath: "/dist"
},
module: {
loaders: [
{
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: 'style!css?sourceMap'
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
},
{
test: /bootstrap\/dist\/js\/umd\//,
loader: 'imports?jQuery=jquery'
}
],
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
watch: true
}
这是我的React代码来渲染图标：
import React from 'react';
import ReactDOM from 'react-dom';
require('../node_modules/font-awesome/css/font-awesome.css');
require('../node_modules/bootstrap/dist/css/bootstrap.css');
require('jquery');
require('bootstrap');
ReactDOM.render(
<div>
<a href="javascript:"><i className="fa fa-bars"></i></a>
</div>,
document.getElementById('react-container')
);
最终结果是屏幕上的正方形,而不是所需的图标.我尝试了几种不同的图标,但均未成功.
帮助解决该问题.
解决方法:
预期的行为是什么？
CSS属性<字体家族：FontAwesome！important>默认情况下应将其应用于字体元素(此CSS类是用Font-Awesome.css文件编写的.),但是由于页面或CSS加载问题,此属性未得到应用.
什么地方出了错？
font-family设置为其他字体系列,而不是真棒字体.
是否在多个站点上发生：是
插件有问题吗？没有
在其他浏览器中可以使用吗？是的Safari
这个问题是随机出现的,但似乎在复杂的CSS网站上更常发生.
解决方案::添加CSS属性<字体家族：FontAwesome！important>在您的代码中显式地在您的代码中.
yourcssfile.css
.fa{
font-family: FontAwesome !important;
}
内容总结
以上是互联网集市为您收集整理的javascript-font-awesome使用React和Webpack不显示图标(仅正方形)全部内容，希望文章能够帮你解决javascript-font-awesome使用React和Webpack不显示图标(仅正方形)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】