I'm trying to use font-awesome with React and Webpack. I've installed font-awesome using npm:
npm install font-awesome --save
I've configured webpack properly and I can see that font-awesome is being loaded by Webpack and bundled in my 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/ponents/Dashboard/Dashboard.js 3.68 kB {0} [built]
[256] ./client/ponents/Dashboard/TopHeader.js 4.71 kB {0} [built]
[257] ./client/ponents/Dashboard/Logo.js 3.38 kB {0} [built]
[258] ./client/ponents/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 configuration in webpack.config.js:
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
}
And here is my React code to render an icon:
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')
);
The final result is a square in the screen, not the desired icon. I've tried several different icons with no success.
Help appreaciated to solve that.
I'm trying to use font-awesome with React and Webpack. I've installed font-awesome using npm:
npm install font-awesome --save
I've configured webpack properly and I can see that font-awesome is being loaded by Webpack and bundled in my 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/ponents/Dashboard/Dashboard.js 3.68 kB {0} [built]
[256] ./client/ponents/Dashboard/TopHeader.js 4.71 kB {0} [built]
[257] ./client/ponents/Dashboard/Logo.js 3.38 kB {0} [built]
[258] ./client/ponents/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 configuration in webpack.config.js:
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
}
And here is my React code to render an icon:
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')
);
The final result is a square in the screen, not the desired icon. I've tried several different icons with no success.
Help appreaciated to solve that.
Share Improve this question edited Jan 20, 2017 at 22:57 Mendes asked Jan 20, 2017 at 16:54 MendesMendes 18.6k38 gold badges166 silver badges282 bronze badges 4- 2 "I've configured webpack properly" - can you provide your webpack config? – mikeapr4 Commented Jan 20, 2017 at 17:06
- Sure, see edit... – Mendes Commented Jan 20, 2017 at 17:24
- Can you please show when the rest of your css is loading in relation to your font-awesome css? Can't see the load order. In general, load the fonts first, then the other styles and make sure these are available before the html is loaded. – Nathaniel Flick Commented Jan 20, 2017 at 18:33
- Nathaniel, done. Check edited code. – Mendes Commented Jan 20, 2017 at 22:57
3 Answers
Reset to default 4What is the expected behavior? CSS property < font-family: FontAwesome !important > should be applied to font element by default (This CSS class is written in Font-Awesome.css file.) but due page or css load issue this property is not getting applied.
What went wrong? font-family is set to different font family instead of font awesome.
Does it occur on multiple sites: Yes
Is it a problem with a plugin? No
Does this work in other browsers? Yes Safari
The issue appears at random, but seems to happen more often on plex CSS websites.
Solution :: add CSS property < font-family: FontAwesome !important > in your code explicitly in your code.
yourcssfile.css
.fa{
font-family: FontAwesome !important;
}
as of 2021, this is how you set up font awesome in your react-webpack project:
npm i @fortawesome/fontawesome-free
in top main file of your project
import "@fortawesome/fontawesome-free/css/all.min.css";
in the ponent that you want to use the icon:
<button className="button" >
<span className="icon">
<i className="fas fa-arrow-up"></i>{" "}
</span>
</button>
you need two loaders, for woff file types, file loader, for svg , svg-url-loader
npm i svg-url-loader --save-dev
npm i file-loader --save-dev
in webpack.config.js
module: {
rules: [
{ test: /\.(ts|tsx)/, loader: "babel-loader", exclude: /node_modules/ },
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[contenthash].[ext]",
outputPath: "fonts/",
},
},
],
},
{
test: /\.svg$/,
use: [
{
loader: "svg-url-loader",
options: {
limit: 10000,
},
},
],
},
],
},
I had the same issue, before using this package. After installing it, configure it in the webpack.config.js file like this:
module.exports = {
module: {
loaders: [
// the url-loader uses DataUrls.
// the file-loader emits files.
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
}
};
Edit: This one seems to be better ;)