로그인

검색

Extra Form
추천지수 6

라이믹스2 에서 새로 생긴 기능 메뉴 아이콘 기능은 간단하게 소식으로 전해드린 적이 있습니다.

 

https://rxtip.kr/rx_story/4083

 

위 소식을 전해드릴때 메뉴에 아이콘을 표시하기 위해 기존에는 메뉴 설명 부분에 아이콘의 특정할 수 있는 문구를 넣고 레이아웃 등에서 메뉴 설명 부분을 읽어와서 출력해주는 것을 별도로 메뉴 아이콘 항목이 신설되어 메뉴설명과 아이콘을 분리해서 사용이 가능하다고 전해드렸습니다.

 

 

메뉴를 출력하는 코드에서 'icon' 값을 출력하도록 코드를 짜면 해당 메뉴에 설정한 아이콘이 나오게 되는거죠.

 

 

저희 라이믹스 꿀팁은 새로 생긴 메뉴 아이콘에 새롭게 아이콘을 넣고 메뉴마다 아이콘을 가지게 해서 출력하게 했습니다.

 

그런데 오늘은 이 메뉴에 있는 아이콘과 똑같은 아이콘이 스케치북 스킨의 빵조각의 메뉴에도 걸리도록 똑같이 만들었습니다.

 

 

기존에 경로 중간에 출력하던 > 는 없애 버리고 각 메뉴가 가지는 아이콘을 메뉴 앞에 출력하도록 했습니다.

화면 캡처 2021-04-21 143126.png.jpg

 

 

<a href="{getSiteUrl()}"><strong>Home</strong></a>
<block loop="$메뉴변수->list=>$key1,$val1" cond="$val1['selected']">
<!--@if(!$val1['list'])--><a href="{$val1['href']}"><em><ion-icon cond="$val1['icon']" name="{$val1['icon']}"></ion-icon> {$val1['text']}</em><!--@else--><ion-icon cond="$val1['icon']" name="{$val1['icon']}"></ion-icon> {$val1['text']}<!--@end--></a>
<block loop="$val1['list']=>$key2,$val2" cond="$val2['selected']">
<a href="{$val2['href']}"><!--@if(!$val2['list'])--><em><ion-icon cond="$val2['icon']" name="{$val2['icon']}"></ion-icon> {$val2['text']}</em><!--@else--><ion-icon cond="$val2['icon']" name="{$val2['icon']}"></ion-icon> {$val2['text']}<!--@end--></a>
<block loop="$val2['list']=>$key3,$val3" cond="$val3['selected']">
<a href="{$val3['href']}"><!--@if(!$val3['list'])--><em><ion-icon cond="$val3['icon']" name="{$val3['icon']}"></ion-icon> {$val3['text']}</em><!--@else--><ion-icon cond="$val3['icon']" name="{$val3['icon']}"></ion-icon> {$val3['text']}<!--@end--></a>
</block>
</block>
</block>

 

 

<ion-icon cond="$val1['icon']" name="{$val1['icon']}"></ion-icon>

<ion-icon cond="$val2['icon']" name="{$val2['icon']}"></ion-icon>

<ion-icon cond="$val3['icon']" name="{$val3['icon']}"></ion-icon>

 

각 차수에 맞는 아이콘을 불러올 수 있도록 레이아웃과 동일하게 코드를 추가해 주어서 아이콘이 표시되도록 했습니다.

 

** 저희 라이믹스 꿀팁은 ion-icon 이라는 아이콘 폰트를 쓰고 있으니 하나의 예시일 뿐 저희랑 똑같이 구성해도 아이콘이 출력되지 않습니다. 그리고 관리자페이지 메뉴 아이콘 입력에 정확한 아이콘 폰트명을 입력해야 합니다.

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
0 추천
Atachment
첨부 '0'

라이믹스 팁(102)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. Read More
  10. 라이믹스 회원(팝업)메뉴에 아이콘 추가해주기

    Date2021.05.11 Category기능 Views116 Votes0
    Read More
  11. RXP FLEX 레이아웃의 다크모드 기능 게시판에 적용하기 4

    Date2021.05.09 Category기능 Views132 Votes0
    Read More
  12. 카카오지도 마커 위치로 카카오내비 길안내 연동하기

    Date2021.05.08 Category기능 Views139 Votes0
    Read More
  13. Read More
  14. 신규 회원 가입 사실만 메일로 전달 받고 싶을때

    Date2021.05.06 Category기능 Views87 Votes0
    Read More
  15. Read More
  16. Read More
  17. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views79 Votes0
    Read More
  18. Read More
  19. Read More
  20. 댓글 주소 클립보드에 복사하는 기능 추가하기 10

    Date2021.04.25 Category기능 Views79 Votes0
    Read More
  21. Read More
  22. Read More
  23. Read More
  24. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

    Date2021.04.21 Category기능 Views61 Votes0
    Read More
  25. Read More
  26. 본문 게시글 주소 복사 버튼 여러곳에 추가해 주기 17

    Date2021.04.10 Category기능 Views82 Votes0
    Read More
  27. input 입력창 크기가 작거나 이상한가요? css box-sizing

    Date2021.04.09 Category기타 Views70 Votes1
    Read More
  28. 본문 게시글 주소 클립보드 복사 기능 만들기 10

    Date2021.04.06 Category기능 Views180 Votes0
    Read More
  29. Read More
  30. 라이믹스 2.0 회원 서명 높이를 조절 하고 싶다면

    Date2021.03.13 Category기능 Views116 Votes0
    Read More
  31. Read More
  32. Read More
Board Pagination Prev 1 2 3 4 Next
/ 4