セマンティックUIのドロップダウンアイコンのみ？

Question

に基づいてhttp://jsfiddle.net/t9vfxo5t/表示されているようにセマンティックUIのドロップダウンが欲しいですが、フラグと国名のテキストではなく、フラグとして表示したいだけの最終結果です。私はまだクリックしたときに国名がドロップダウンに表示されるようにしたい。

http://jsfiddle.net/Lhzua273/1/のテキストを削除しようとしましたが、ドロップダウンリストからも削除されました。

<div class="ui fluid search selection dropdown"> 
    <input type="hidden" name="language"> 
    <div class="default text">Select language</div> 
    <div class="menu"> 
     <div class="item" data-value="gb"><i class="gb flag"></i>English</div> 
     <div class="item" data-value="es"><i class="es flag"></i></div> 
    </div> 

誰もがそれを達成することができる方法を提案することはできますか？

（最終的には、表示されているように4つのアイコンのドロップダウンを横に並べて表示することができるので、携帯電話のポートレートモードに適しています。 4.各リストがクリックされたときにドロップダウンリストが表示されても、ポートレート画面の内側に収まることを期待しています。リストが画面の右端に当たっている場合は、ドロップダウンリストの左余白をマイナスにする必要があります。

Answer 1

あなたはこのような何かをしたいですか？

<div class="ui compact selection dropdown"> 
    <i class="dropdown icon"></i> 
      <div class="text">FLAG</div> 
      <div class="menu"> 
        <div class="item"><i class="es flag"></i></div> 
        <div class="item"><i class="jp flag"></i></div> 
        <div class="item"><i class="ru flag"></i></div> 
        <div class="item"><i class="cn flag"></i></div> 
      </div> 
    </div> 

https://jsfiddle.net/busLpjag/

これは国選択リストでモーダルを使用するために、より良い悪いUXです。ドロップダウンで

5（またはそれ以上）のフラグが=あなたのドロップダウン:(

Answer 2

内のスクロールバーは、あなたは、各.menu .item要素でdata-textを追加する必要が

すなわち：。

<div class="item" data-text="Spanish" data-value="es"> 
    <i class="es flag"></i> 
</div> 

こちらをご覧ください：http://jsfiddle.net/9t5qapog/2/

私はまた、JSFidの各オプションのdata-textの中にフラグアイコンを含めましたうんこれは必須ではありません。