0

Estou criando um exercício de javascript, minha ideia era criar uma função que me desse como retorno um ícone, estou utilizando o FontAwesome para isso.Consegui fazer com que ele mostre o ícone e a mensagem porem queria acrescentar estilos predefinidos por mim para titulos, enfase .. etc, por meio de uma função mas ainda não consegui pensar em uma forma. Até tentei usar o Swith mas ele só copía o css como uma string qualquer

function icones(ico_nome, texto,style ){ // Captura o nome do icone, o estilo que sera utilizado e o texto
    switch(ico_nome) { //Verifica o icone do argumento
        case 'user':
            ico_nome = '%c ' //Icone, só sera visualizado após a declaração CSS
            font = 'font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 20px; content: "\f434";'
        break
    }  
    switch(style) { //Estilizando texto
        case 'titulo':
            texto = 'color: red'
        break
    }
    console.log(ico_nome,font,texto) 
}
icones('user','usuario', 'titulo') //Aplicando valores a função

4
  • Eu não entendi a pergunta. Você quer aplicar CSS no texto do console? Se essa for essa a questão a resposta é impossível fazer isso. O que dá para fazer é criar um elemento com createElement() ajustar suas propriedades e depois inserir no DOM para ser renderizado na própria página HTML. Commented 1/01/2020 às 0:09
  • 1
    Não é impossível kk, você pode sim adicionar CSS, para isso basta adicionar "%c Antes da mensagem de saída no meu caso ficaria console.log(" %c Ola mundo", "color:red), não será possível em um terminal mas em console do crome consegue executar.
    – user77295
    Commented 1/01/2020 às 0:14
  • Não é que funcionou! imgur.com/a/cWabOCM. Valeu cara eu não sabia disso! Commented 1/01/2020 às 0:21
  • 1
    Vivendo e aprendendo kkkkk feliz ano novo
    – user77295
    Commented 1/01/2020 às 0:23

1 Resposta 1

1

Depois de varias tentativas e erros, consegui a façanha sem uso do DOM, o "segredo" era adicionar 2 estilos ao mesmo metodo (console.log)

function icones(ico_nome,texto,style ){ // Captura o nome do icone, o estilo que sera utilizado e o texto
    switch(ico_nome) { // Check argument icon
        case 'user':
            ico_nome = '%c ' // Icon will only be displayed after CSS declaration
            font_icon = 'font-family:"Font Awesome 5 Free"; font-weight: 900; font-size: 20px;' //Declara a fonte para visualização
        break
    }  
    switch(style) { // Styling text
        case 'titulo': // Set styles for titles
            font_icon += 'color:red;' //Set the color Red to Icon
            style_text = 'color:blue; font-family: Arial;' // Set styles for texts
        break
        default: 
            font_icon += 'color: black' // Set default color
    }
    console.log(ico_nome + ' ' + '%c' + texto,font_icon,style_text)  //Join the 2 styles and reveal the output
}
icones('user','Usuario', 'titulo') //Applying values to function

Saida console

Você deve fazer log-in para responder a esta pergunta.