[HTML] 폰트 어썸(Font Awesome)에서 아이콘(Icons) 사용하는 방법. CDN 연결하기

개발 2018. 9. 10. 11:40

세련된 아이콘을 사용하기 위해 이 사이트를 방문했다.


https://fontawesome.com/v4.7.0/get-started/


이곳에서 이메일을 입력하면, 


사용할 수 있게 CDN을 제공한다.


한줄이다.


이것을 HTML문서 내 <head> 태그에 복붙한다.


그 다음에 <body> 태그에서 사용하면 된다.


 

멋진 아이콘들이 많다.


https://fontawesome.com/v4.7.0/icons/


사용하고 싶다면, 원하는 아이콘을 클릭해보자.


어떻게 사용할지, 나온다.




쉽다. 원하는 위치에 복붙하면 된다.


참고로, 리액트에서 사용하고자 한다면,


프로젝트 내 public > index.html에 CDN을 붙여넣으면 된다.


이상.

'개발' 카테고리의 다른 글

윈도우7(Windows7)에서 pip 설치할때 에러 해결하기  (0) 2018.09.28
윈도우7(Windows7)에서 파이썬 설치하기  (0) 2018.09.28
터미널(Terminal)에서 해당 디렉토리 vs code 바로 실행하기  (0) 2018.07.18
[React] 04) 리액트(React)에서 컴포넌트 라이프사이클(Component Lifecycle)  (0) 2018.07.13
vs code에서 자동으로 태그(Tag) 닫아주는 패키지 설치!  (0) 2018.07.12
Posted by sungho88
,

[Javascript] 자바스크립트에서 숫자 세자리마다 콤마(,) 찍는 방법!!

개발/자바스크립트 2018. 8. 31. 15:10

Number() 생성자 함수는 숫자 객체 / 숫자 원시값을 만들 때 사용한다.


toLocaleString() 함수를 사용하면 된다.


Number() 형 내장 함수이다.


돈의 형태(1000단위로 콤마[,]) 형태로 형변환을 시켜 리턴하는 함수이다.


뭔말인지 모르겠으면 예제를 보자.


Number(1000000).toLocaleString('en');


결과값 : 1,000,000



'개발 > 자바스크립트' 카테고리의 다른 글

자바스크립트로 문자열에 특정 문자열이 존재하는지 체크하는 방법 : indexOf()  (0) 2018.10.15
[자바스크립트] Math() 함수를 이용해서 올림, 반올림, 버림 적용하기  (0) 2018.09.18
[ECMAScript6] 기존의 var 키워드와 let, const 키워드  (0) 2018.08.04
배열에서 splice()함수의 기능 : 배열 요소(Index)를 제거하는 함수!!  (0) 2018.07.12
vs code 에러 : 'xx'이(가) 선언은 되었지만 해당 값이 읽히지는 않았습니다.  (0) 2018.07.04
Posted by sungho88
,

[React] react render 함수에서 a태그의 href값을 동적으로 변경하고 싶을때 .

개발/React 2018. 8. 31. 11:51

render{

    const {datas} = this.props;   

 return (

        <ul>

            {

                this.props.datas.map(data => {

                    return <li key={data.id}><a href='/url/' + {data.id}>{data.title}</a></li>

                }

            }

        </ul>

    );

}



<a href='/url/' + {post.id}>


이 부분을 map 함수 실행되는 동안 고유의 값(id)으로 변경하면서 링크를 생성하고 싶다.


아무리 href속성에서 +를 쓰려해봐도 에러나고, 어떻게 값을 문자열로 변경하여 붙일 수 있을까?



href={'/url/' + data.id}


이렇게 하면 된다.


{} 한 뒤에 그 안에 문자열 + data.id로 작성하면 문자열로 변환되어 map함수로 실행하면 정상적으로 작동된다.


'개발 > React' 카테고리의 다른 글

[React] 리액트 참고 블로그 & 도움이 될 만한 블로그 정리  (0) 2018.10.02
[React 공식 홈페이지 번역 01] 리액트란 무엇인가??  (0) 2018.09.30
[React] Reactjs code snippets을 설치해서 리액트 코드 템플릿 자동 생성하기  (0) 2018.08.27
[React] Windows에서 npm 설치 오류 발생시 해결 방법...  (0) 2018.08.26
[React] 리액트(React)로 파이어베이스(Firebase) 배포(Deploy)하는 방법!!!  (0) 2018.08.13
Posted by sungho88
,

티스토리툴바