선택 태그 내의 화살표 아이콘을 글꼴이 큰 아이콘으로 변경하려면 어떻게 해야 합니까?Vue-Cli를 사용하고 있습니다.나는 main.js에서 폰타썸을 수입했다.

선택 태그 내의 화살표 아이콘을 글꼴이 큰 아이콘으로 변경하려면 어떻게 해야 합니까?Vue-Cli를 사용하고 있습니다.나는 main.js에서 폰타썸을 수입했다.

vue-cli를 사용하고 있습니다.나는 vue를 꽤 처음 본다.선택 태그 오른쪽 구석에 있는 화살표 기호를 변경하려고 합니다.어떻게 해야 하죠?해결책을 찾아봤더니 css를 사용할 필요가 있대요.그런데 어떻게 css에서 font-awesome을 사용할 수 있을까요?

스타일링 폼필드에 대한 좋은 참조처는 wtfForms.com 입니다.

이렇게 하는 방법은 여러 가지가 있습니다.단, 사이트 전체에서 Font Awesome을 사용하여 CSS 내의 여러 아이콘에 액세스해야 하는 경우 CSS 스타일시트를 Import할 수 있습니다.여기: https://fontawesome.com/start

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

그런 다음 pseduo 요소의font-family[ Font Awesome ]글꼴을 선택하고 아이콘의 유니코드를 사용합니다.content그 유사 요소의.[ Font Awesome ]웹 사이트에서 아이콘을 참조하면 각 아이콘에는 페이지 상단에 유니코드가 나열됩니다.

유사 요소에서 글꼴 Awesome 사용에 대한 정보

.example::before {
  font-family: "Font Awesome 5 Free";
  content: "\f007";
}

사용 예에서는 wtf Forms의 방법을 참조하여 선택한 입력을 다른 요소로 래핑해야 합니다.스타일링(및 유사 아이콘)을 해당 요소에 적용하고 원래 선택 입력을 숨깁니다.

.select {
  position: relative;
  display: inline-block;
  color: #555;
}

.select select {
  padding: .5em 2.25em .5em 1em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.select:after {
  position: absolute;
  top: 25%;
  right: .5em;
  font-family: "Font Awesome 5 free";
  content: "\f358"
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<div class="select">
  <select aria-label="Select menu example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

하지만 wtf Forms의 의견을 읽어보십시오.여기에는 몇 가지 경고와 접근성에 관한 문제가 있습니다.이러한 문제의 개요는 사이트에 기재되어 있습니다.

언급URL : https://stackoverflow.com/questions/55674519/how-do-i-change-the-arrow-icon-inside-the-select-tag-with-a-fontawesome-icon-i