CODEWITHSUNDEEP
javascriptcssdomfont-awesome
ruffy
ruffy

Reputation: 9

How To Embed font-awesome CSS into DOM Scripting (javascript)?

Here, javascript, using DOM SCRIPTING, generates a last line for browser display that reads: "No Finds". Suppose I want to juxtapose an "iconic character" from font-awesome (fontawesome), eg, their smiley face, right after the word "Finds".

I tried wedging this string:

<i class = 'fa fa-smile-o'></i>

just after the words "No Finds", as follows, but that did not work.

This is code that works:

newrow = makeEle({ tag: "tr", dom: [makeEle({ tag: "td", id: "tdWhere", dom: [document.createTextNode("No Finds")] })] });

Here's my addition - that failed:

newrow = makeEle({ tag: "tr", dom: [makeEle({ tag: "td", id: "tdWhere", dom: [document.createTextNode("No Finds<i class = 'fa fa-smile-o'></i>")] })] });

How do I get CSS (of font-awesome) to bear influence here? I don't really understand how javascript and CSS interface, so I may be asking for the impossible.

The above was solved by correct coding as follows (thanks to Michal):

newrow = makeEle({ tag: "tr", dom: [ makeEle({ tag: "td", dom: [document.createTextNode(" No Finds "), makeEle({ tag: "i", className: "fa fa-frown-o" }) ] }) ] });

Upvotes: 0

Views: 2128

Answers (2)

Michal
Michal

Reputation: 2532

Since the font-awesome markup is HTML and not simply text, the document.createTextNode function won't work. So you have to use makeEle to make that i tag node. Here's what the code looks like (I split it out into multiple lines for readability):

newrow = makeEle({
  tag: "tr",
  dom: [
    makeEle({
      tag: "td",
      id: "tdWhere",
      dom: [
        document.createTextNode("No Finds"),
        makeEle({
          tag: "i",
          className: "fa fa-smile-o"
        })
      ]
    }),
  ]
});

Note the extra makeEle call inside of the dom array for the td.

See here for a demo on jsfiddle

Upvotes: 0

Gustaf Gun&#233;r
Gustaf Gun&#233;r

Reputation: 2267

Set the class to fa fa-smile-o. 

var i = document.createElement("i");
i.className = 'fa fa-smile-o';

Upvotes: 2

Related Questions