材料设计精简版追加图标

问题描述：

我有附加问题

使用它似乎不加载CSS/JS材料图标的，而不是它显示的字核查材料设计精简版追加图标

- 这部分出来stepper.js

的

var i = document.createElement('i'); 
         i.style.className = 'material-icons'; 
         var text = document.createTextNode('check'); 
         i.appendChild(text); 


         elements.appendChild(i);

我想知道我将如何重新加载js文件或重新加载素材字体部分？

我的头 - 我是如何加载styesheet和js

<script type="text/javascript"> 
var uid = '{$smarty.session.ipet_user}'; 
{literal} 

    function stylesheet(url) { 
      var s = document.createElement('link'); 
      s.rel = 'stylesheet'; 
      s.async = false; 
      s.href = url; 
      var x = document.getElementsByTagName('head')[0]; 
      x.appendChild(s); 
     } 

     function script(url) { 
      var s = document.createElement('script'); 
      s.type = 'text/javascript'; 
      s.async = true; 
      s.src = url; 
      //s.defer = true; 
      var x = document.getElementsByTagName('head')[0]; 
      x.appendChild(s); 
     } 


     (function() { 
       stylesheet('https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css'); 
       stylesheet('https://fonts.googleapis.com/css?family=Roboto'); 
       stylesheet('https://fonts.googleapis.com/icon?family=Material+Icons'); 
       stylesheet('./templates/main/user-theme/tpl-files/material.act.css'); 
       stylesheet('plugins/dropzone/dropzone.css'); 
       stylesheet('plugins/stepper/stepper.min.css'); 
       stylesheet('./templates/main/user-theme/tpl-files/style.css'); 
       stylesheet('./templates/main/style/newprofile.css'); 
       stylesheet('plugins/getmdlselect/getmdl-select.min.css');  

       script('https://code.getmdl.io/1.3.0/material.min.js'); 
       script('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'); 
       script('https://apis.google.com/js/api:client.js'); 
       script('https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBk99v0F4qkmvxifqOD48YktK-QO-3kopI'); 
       script('./templates/main/user-theme/javascript/google.js'); 
       script('plugins/getmdlselect/getmdl-select.min.js'); 
       script('./templates/main/user-theme/javascript/facebook.js'); 
       script('./templates/main/user-theme/javascript/newprofile.js'); 
       script('./templates/main/javascript/zipcode.js'); 
       script('plugins/stepper/v2/stepper.js'); 


     })(); 
</script>

答

你必须通过.className不.style.className

i.className = 'material-icons';

var elements = document.body; 
 

 
var i = document.createElement('i'); 
 
i.className = 'material-icons'; 
 
var text = document.createTextNode('check'); 
 
i.appendChild(text); 
 

 
elements.appendChild(i);

<head> 
 
</head> 
 
<body> 
 
    <script> 
 
     function stylesheet(url) { 
 
      var s = document.createElement('link'); 
 
      s.rel = 'stylesheet'; 
 
      s.async = false; 
 
      s.href = url; 
 
      var x = document.getElementsByTagName('head')[0]; 
 
      x.appendChild(s); 
 
     } 
 

 
     function script(url) { 
 
      var s = document.createElement('script'); 
 
      s.type = 'text/javascript'; 
 
      s.async = true; 
 
      s.src = url; 
 
      //s.defer = true; 
 
      var x = document.getElementsByTagName('head')[0]; 
 
      x.appendChild(s); 
 
     } 
 

 

 
     (function() { 
 
       stylesheet('https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css'); 
 
       stylesheet('https://fonts.googleapis.com/css?family=Roboto'); 
 
       stylesheet('https://fonts.googleapis.com/icon?family=Material+Icons'); 
 
       stylesheet('./templates/main/user-theme/tpl-files/material.act.css'); 
 
       stylesheet('plugins/dropzone/dropzone.css'); 
 
       stylesheet('plugins/stepper/stepper.min.css'); 
 
       stylesheet('./templates/main/user-theme/tpl-files/style.css'); 
 
       stylesheet('./templates/main/style/newprofile.css'); 
 
       stylesheet('plugins/getmdlselect/getmdl-select.min.css');  
 

 
       script('https://code.getmdl.io/1.3.0/material.min.js'); 
 
       script('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'); 
 
       script('https://apis.google.com/js/api:client.js'); 
 
       script('https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBk99v0F4qkmvxifqOD48YktK-QO-3kopI'); 
 
       script('./templates/main/user-theme/javascript/google.js'); 
 
       script('plugins/getmdlselect/getmdl-select.min.js'); 
 
       script('./templates/main/user-theme/javascript/facebook.js'); 
 
       script('./templates/main/user-theme/javascript/newprofile.js'); 
 
       script('./templates/main/javascript/zipcode.js'); 
 
       script('plugins/stepper/v2/stepper.js'); 
 

 

 
     })();</script> 
 
</body>

定义为元素的类

材料设计精简版追加图标

相关推荐