-1

I wanted to rotate CSS font awesome direction (fa fa-arrow-up) on table column on each array element when the page load with provided angles. I create table dynamically from array using JavaScript. The arrow is displaying in table column, but not rotating. How i can attache direction rotation on each array element

//JavaScript

  var html = ''; 
  for (i = 0; i < 7; ++i){
      html += '<tr id="list">';
      html +='<td>'+ days[i] +'</td>'; 
      html +='<td>'+ max[i] +'</td>'; 
      html +='<td>'+ average[i] +'</td>'; 
       html +='<td>'+ "<div class='fa fa-arrow-up'> </div>"+ '</br>' + windS[i] +'</td>'; 
      html +='</tr>'; 

  }

  $('#weatherTable > tbody').html(html); 



$(".fa-arrow-up").rotate(angle);
tumsido
  • 1
  • 3
  • I dont see what the issue is. Where you have your comment that says i need to rotate image, call you're rotate function after that. The rotate function has a typo you missed the # in $('#imageId') – Stefan Aug 15 '17 at 18:41
  • @stefan i edit the original question – tumsido Aug 16 '17 at 12:53
  • did my solution help you? if so please mark as correct. thanks – Stefan Aug 18 '17 at 14:41

1 Answers1

0

Looks like you are trying to have an arrow pointing in the wind direction. Which im guessing can be N NE E SE S SW W NW and N. Thats 9 cases. With font awesome 4 directions are already covered for you by default, N E S W. All you have to do is apply the rotation degrees with css:

<div class='fa fa-arrow-up fa-rotate-90'> </div>

If you want to show other directions look at this stack overflow answer here:

Statically rotate font-awesome icons

Stefan
  • 352
  • 3
  • 15