cssにフォントの素晴らしいアイコンを追加する

debugcn 投稿 Dev

グレッグ

私はCSSフォルダーにこのテーブルスタイルを持っていて、たくさんのことを試しましたが、フォントの素晴らしいアイコンをさまざまな色でその中に入れることができません。色付きのドットの代わりに

.services-table { width: 100%; margin: -9px 0 10px; border-collapse: collapse; }
  .services-table th { color:#fff; background: #A5A5A5; padding: 10px; }
  .services-table td { padding: 8px 10px; }
  .services-table tr.odd { background: #F3F3F3; }
  .services-table tr.even { background: #E6E6E6; }
  .services-table th.col-service, td.col-service { width: 30%; } 
  .services-table th.col-info, td.col-info { width: 50%; }  
  .services-table th.col-status, td.col-status { width: 20%; }  

  span.status { display:inline-block; width: 15px; height:15px; border-radius:10px; }
  span.status.green { background: #008000; }
  span.status:after { margin-left: 20px; }
  span.status.green:after { content: 'Good' }
  span.status.amber { background: #ffcf00; color: #ffcf00; }
  span.status.amber:after { content: 'Amber' }
  span.status.red { background: #ff0000; color: #ff0000; font-weight:bold; }
  span.status.red:after { content: 'Red' }

テーブルはセールスフォースとうまく連携し、サービスステータスに基づいて異なる色を表示しますが、色の代わりにアイコンが必要です。

belgacemfahmi

あなたはあなたのファイルにcssを追加します

@import url（ ' https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0awesome.min.css '）;

その後、このような素晴らしいフォントを使用できます

/ * exp：アイコンベルは： "\ f0f3"
アイコン情報： "\ f05a" * /

.statuts{
 text-align:center;
 background-color:#fff;
 font:normal normal normal 14px/1 FontAwesome;
 font-size:inherit;
 text-rendering:auto;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale
 }

 .statuts.red{ color:#f00;}
 .statuts.blue{ color:#00f;}
 .statuts.red.danger:before{content:"\f0f3";font-size:30px;}
 .statuts.blue.info:before{content:"\f05a";font-size:30px;}

デモ：「http://jsfiddle.net/bfahmi/dcp3wvjt」

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]