CSS font family only apply to certain elements within the same class

274
April 10, 2017, at 08:55 AM

I have made a simple todo list where i am able to append a new item into the existing list each time user input and press enter.

I wanted to change the font and i apply my font-family into Body tag. However it ONLY applies to my existing element, but not the new elements that have been added.

$("input").on("keypress", function(e) { 
  var newToDo = $(this).val(); 
  if (e.which == 13) { 
    $("ul").append('<li><span><i class="fa fa-bomb" aria-hidden="true"> ' + newToDo + '</li>'); 
    $(this).val(""); 
  } 
})
body { 
  font-family: Roboto; 
} 
 
body { 
  background: #36D1DC; 
  /* fallback for old browsers */ 
  background: -webkit-linear-gradient(to right, #5B86E5, #36D1DC); 
  /* Chrome 10-25, Safari 5.1-6 */ 
  background: linear-gradient(to right, #5B86E5, #36D1DC); 
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,700,500"> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> 
<div id="container"> 
 
  <h1>TO DO LIST <i class="fa fa-bolt" aria-hidden="true"></i></h1> 
  <input placeholder="Add New Todo" /> 
  <ul> 
    <li><span><i class="fa fa-bomb" aria-hidden="true"></i></span> TEST 1</li> 
    <li><span><i class="fa fa-bomb" aria-hidden="true"></i></span> TEST 2</li> 
    <li><span><i class="fa fa-bomb" aria-hidden="true"></i></span> TEST 3</li> 
  </ul> 
 
 
</div>

Questions: 1. Why new entry created by the user input is using DIFFERENT font although i am trying to use same font through BODY TAG.

POC that i have tried: 1. Make sure there is no overriden, by assigning same font on all css. E.g. All classes, ID will have "font-family: Roboto;"

Answer 1

If I understand correctly then it might be because haven't setup the append properly as it is missing some closing html tags (the closing i and span). Update that line to be:

$("ul").append('<li><span><i class="fa fa-bomb" aria-hidden="true"></i></span> ' + newToDo + '</li>');

I think (without a code demo) as you are not closing the i it is wrapping the font applied to Font Awesome to your text that the user inputted

Answer 2

Your initial list items have their text ("Test 1") outside of the <i> element.

When you insert an item though you're missing the closing </i> and </span> tags, so the text is considered to be inside the <i> and it's font is set by the .fa rule in font-awesome.css.

Rent Charter Buses Company
READ ALSO
Concat and minify CSS files with Webpack without requiring them from JS

Concat and minify CSS files with Webpack without requiring them from JS

what I'd like to achieve is the simplest way to concat and minify CSS with WebpackI (successfully) tried ExtractTextPlugin and OptimizeCssAssetsPlugin, as follows

622
How to redirect to another page on the server when hyperlink is clicked?

How to redirect to another page on the server when hyperlink is clicked?

I have a homepage titled indexphp located in the public_html folder on the server I'm using to host my webpage

274
Materialize class row with unequal height

Materialize class row with unequal height

So I'm Using Materialize http://materializecsscom/grid

420