메뉴에 아이콘 등 기타 효과 넣기

라이믹스가 2.0.6 버전으로 Release되면서 메뉴에 추가되는 아이콘을 사용할 수 있게 되었습니다.

예전에는 메뉴이름에 코드를 같이 넣거나, 몌뉴설명을 가져오는 방법을 사용했는데 편해졌습니다.

 

근데 이것을 적용하는 방법이 잘 나와 있지를 않습니다.

"아이콘 코드를 어떻게 해석하는지는 레이아웃에 따라 다를 수 있습니다." 이 문구만 설정칸 아래에 보입니다.

 

[적용방법]

1. 자신이 사용하고 있는 레이아웃을 수정해야 합니다 - xedition 레이아웃을 예로 듭니다

./layouts/xedition/layout.html 파일을 열어서 메뉴부분을 찾습니다. 270줄 부터 ~

<ul>
    <li loop="$GNB->list => $key1, $val1">
        <a href="{$val1['href']}" target="_blank"|cond="$val1['open_window'] == 'Y'">{$val1['link']}</a>
        <block cond="$val1['selected']">{@ $_selected_menu = $val1}</block>
        <ul cond="$val1['list']" class="depth2">
            <li loop="$val1['list'] => $key2, $val2" class="more"|cond="$val2['list']">
                <a href="{$val2['href']}" target="_blank"|cond="$val2['open_window'] == 'Y'">{$val2['link']}</a>
                <ul cond="$val2['list']" class="depth3">
                    <li loop="$val2['list'] => $key3, $val3">
                        <a href="{$val3['href']}" target="_blank"|cond="$val3['open_window'] == 'Y'">{$val3['link']}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

{$val1['link']} 이 부분이 메뉴명을 나타내는 코드입니다.

 

{$val1['icon']} {$val1['link']}

위와 같이 하늘색 부분을 추가해 주면 됩니다.

<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window'] == 'Y'">{$val1['icon']} {$val1['link']}</a>

2. 관리자페이지 > 사이트 메뉴 편집 > 메뉴수정 에서 "메뉴 아이콘"에 아이콘 코드를 입력하면 됩니다.

 a. 위의 이미지와 같이 폰트어썸을 사용하셔도 되고, Xeicon등을 사용하시면 됩니다.

 b. 이미지를 넣을 수도 있습니다. <img src="./img/1.png" alt="" /> 

 c. 특수문자나 마크등을 넣을 수도 있습니다.

 

3. 근데 약간 더 나아가서

{$val1['icon']} {$val1['link']} 이부분에 class=""를 주고 style을 주는 방법입니다.

<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window'] == 'Y'"><span class="lm_icon">{$val1['icon']}</span> {$val1['link']}</a>

<style>
.lm_icon { vertical-align:middle; display:inline-block; margin-right:5px; }
.lm_icon i { color:red; }
.lm_icon img { width:13px; height:13px; }
</style>

레이아웃의 사항에 맞게 style을 수정하시면 더욱 보기 좋은 아이콘이 출력되겠죠